Develop Reference

JointJS ports are not active

I use Ports API and JointJS 2.0. The problem is that i created ports, but they are not active. Port just become part of rect. I can't drag a link from it. Sorry, but i can't setup fiddle link with joint 2.0. I have "joint is not defined" in console.
Here is code:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var port = {
args: {},
markup: '<rect width="10" height="10" stroke="red"/>'
};
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } },
ports: {
groups: {},
items: [ port ]
}
});
graph.addCells([rect]);
Here is jsfiddle with old joint

Add a tooltip to draw container sprite

I have created a DrawContainer and I want to add a sprite with a tooltip to it, ideally with dynamic content. Unfortunately, the tooltip does not appear at all. How can the code below be corrected?
Thanks in advance.
var r = this.getSurface().add({
type: "rect", strokeStyle: "#9090f0", x: 10, y: 10, width: 40, height: 40
});
var tip = Ext.create('Ext.tip.ToolTip', {
html: "Tooltip"
});
r.on("mouseover", function() {
tip.show();
});

You could try using spriteevents plugin on the draw container, like so
var tip = Ext.create('Ext.tip.ToolTip', {
html: "Tooltip"
});
var s = Ext.create({
xtype: 'draw',
renderTo: document.body,
width: 400,
height: 400,
plugins: ['spriteevents'],
sprites: [
{
type: "rect",
strokeStyle: "#9090f0",
x: 10,
y: 10,
width: 100,
height: 100
}
],
listeners: {
spritemouseover: function (item, event) {
tip.show();
},
spritemouseout: function (item, event) {
tip.hide()
}
}
});

How do I programmatically hide Tab in the TabPanel (ExtJS 3)

This my TabPanel code:
inside the code there is two tabs (tab1 and tab2) in the TabPanel (tabs_panel)
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
height: 210,
resizeTabs: true,
tabWidth: 266,
id: 'tabs_panel',
initComponent: function () {
this.items = [{
xtype: 'panel',
title: 'Project',
padding: 20,
height: 150,
id: 'tab1'
}, {
xtype: 'panel',
title: 'Service',
height: 150,
padding: 20,
id: 'tab2'
}]
}
});
I'm trying to hide tab2 using bellow code but this bellow code
var tabPanel = Ext.getCmp('tabs_panel');
var tabToHide = Ext.getCmp('tab2');
tabPanel.hideTabStripItem(tabToHide);
but somehow this above code does not work for me. How can I fix the problem?

You have two possibilities:
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem("tab2"); // with tab id
or
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem(1); // with tab index

try this one
Ext.getCmp("tab").child('#id').tab.hide()

Sencha extjs4.0 : can't load the GmapPanel

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
Ext.onReady(function() {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
width: window.innerWidth,
height: window.innerHeight,
//title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
//title: 'Map',
region: 'center',
xtype: 'gmappanel',
center: {geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',marker: {title: 'Fenway Park'}}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
myMask.hide();
});
Question
Why can't load the gmappanel?
I'm trying to show the Loading Mask, when Page complete loaded only remove the loading mask? how to do it?

region: 'center', // center region is required, no width/height specified
xtype: 'gmappanel',
id : 'mygooglemap',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
zoomLevel: 2,
gmapType: 'map',
center: {geoCodeAddr: 'Malaysia'}
Try This code workable for u or not.

Render chart in ExtJS 4 Container/Panel

I have a predefined pie chart like this:
Ext.create('Ext.chart.Chart', {
width : 450,
height : 300,
animate : true,
store : store,
theme : 'Base:gradients',
series : [{
type : 'pie',
field : 'data1',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight : {
segment : {
margin : 20
}
},
label : {
field : 'name',
display : 'rotate',
contrast : true,
font : '18px Arial'
}
}]
});
Then I created a Container/Panel, here I am using Container.
I am looking for a way to put my pre-defined chart into the Container. I saw some examples they actually define the chart in the Container field, but that's not what I want. Is there any way that I can put my pre-specified chart in the items field below so that the chart can be rendered?
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {boderColor: '#000000', borderStyle: 'solid', borderWidth: '1px'},
items: [{
}]
});
Thanks

Yes, it's as simple as:
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 600,
height: 600,
renderTo: Ext.getBody(),
border: 1,
style: {
boderColor: '#000000',
borderStyle: 'solid',
borderWidth: '1px'
},
items: chart
});
Also note there's no use specifying dimensions on the chart since it's being used in a fit layout.