PDA

View Full Version : How to use gvisualization in exJs 3.3.1?



28 Dec 2011, 11:07 PM
I am getting error
Invalid type: undefined.

I want show tree Structure diagram in panel
i included following file in html

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="ba/extlib/ext-3.3.1/examples/ux/GVisualizationPanel.js"></script>

var familyTreeWindow;
var familyTreePanel;
var employeeDs = new Ext.data.SimpleStore({
storeId: 'empDs',
fields: [{
name: 'employeeName',
type: 'string'
},{
name: 'mgrName',
type: 'string'
},{
name: 'income',
type: 'int'
}],
data: [
['Mike','',130000],
['Jim','Mike',92000],
['Alice','Mike',87000],
['Joe','Mike',72000],
['Andrew','Alice',67000],
['Bob','Jim',55000],
['Carol','Jim',56000],
['Kerry','Joe',62000]
]
});

var orgChartCt = new Ext.Panel({
layout: 'border',
id: 'orgChartCt',
defaults: {
border: false
},
items: [{
xtype: 'gvisualization',
id: 'orgChart',
region: 'north',
height: 220,
bodyStyle: 'padding: 30px;',
visualizationPkg: 'orgchart',
title: 'Org Chart Sample',
store: 'empDs',
columns: ['employeeName','mgrName']
}
]
})


familyTreePanel = new Ext.FormPanel({
region:'center',
width:560,
height:460,
layout:'absolute',
id:'familyTreePanelId',
//bodyStyle: "background-image:url(ba/images/imgGameCatelog.png)",
items:[
orgChartCt,
{
xtype:'button',
text:'Close',
x:450,
y:415,
width : 80,
height: 20,
handler:function(){
Ext.getCmp("familyTreeWindowID").hide();
}
}
]
});

function ShowFamilyTreeWindow()
{
if(!familyTreeWindow)
{
familyTreeWindow = new Ext.Window({
layout: 'absolute',
closable:false,
closeAction:'hide',
resizable:false,
width:560,
height:460,
x:90,
y:10,
constrain: true,
modal:true,
id:'familyTreeWindowID',
renderTo:'docVaultMainPanel',
items:[familyTreePanel]
});
}
familyTreeWindow.show();
}

still it not work
If any anyone knows how to use GVisualizationPanel .
please help me


Thanks in advance

mitchellsimoens
29 Dec 2011, 11:51 AM
Here is a sample usage:


var countryStore = new Ext.data.SimpleStore({
fields: [{
name: 'Country',
type: 'string'
},{
name: 'pop',
type: 'int'
},{
name: 'area',
type: 'int'
}],
data: [
['CN', 1324, 9640821],
['IN', 1134, 3287263],
['US', 304, 9629091],
['ID', 232, 1904569],
['BR', 187, 8514877]
]
});
var intensityMap = new Ext.ux.GVisualizationPanel({
id: 'intensityMap',
visualizationPkg: 'intensitymap',
title: 'Intensity Map Sample',
store: countryStore,
columns: ['Country',{
dataIndex: 'pop',
label: 'Population (mil)'
},{
dataIndex: 'area',
label: 'Area (km2)'
}]
});