PDA

View Full Version : Charts in tabPanel with JSON store



suntsu
25 Aug 2009, 9:37 PM
Hi,

I can get my graph to show up and I get no JS error within FB...

Here is my first the code witch is called within the Ext.onReady function:


var PMI_Tree_Panel = new softCore.mainTree({referenceTabPanel:PMI_Tab_Panel, loader:PMI_Tree_Loader, root:PMI_Tree_Root, tbar:PMI_Tree_Toolbar});So far everything is working well !

The code of the TabPanel:

var PMI_Tab_Panel = new Ext.TabPanel({
id:'PMI_Tab_Panel',
activeTab: 0,
border:false,
autoScroll:true,
enableTabScroll:true,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu(),
items: [{
title: 'Welcome',
autoHeight:true,
autoLoad: {url: 'welcome.html'},
iconCls:'icon-welcome'}]
});Next part of code is the softCore.mainTree class


softCore.mainTree = new Ext.extend(Ext.tree.TreePanel, {
initComponent:function() {
var config = {
collapsible : false,
animCollapse : false,
border : false,
autoScroll : true,
animate : true,
enableDD : false,
lines : false,
containerScroll : true
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
softCore.mainTree.superclass.initComponent.apply(this, arguments);
},
constructor:function(config) {
config = config || {};
config.listeners = config.listeners || {};
Ext.applyIf(config.listeners, {
click: function(node) {
displayStatusBarMessage('Tree node <b>&quot;'+node.attributes.text+'&quot;</b> selected');
switch(node.attributes.customAttribute){
case 'sportStatus':
if (!this.referenceTabPanel.getComponent('tab_sportStatus')){
var PMI_Sport_Results = new softCore.sportResults({id:'tab_sportStatus',
title:'Sport results',
storeSport: PMI_Sport_Status_Table
});
this.referenceTabPanel.add(PMI_Sport_Results);
this.referenceTabPanel.activate(PMI_Sport_Results);
displayStatusBarMessage('Displayed sport result table');
}else{
this.referenceTabPanel.activate('tab_sportStatus');
}
break;
case 'sportGraph':
if (!this.referenceTabPanel.getComponent('tab_sportGraph')){
var PMI_Sport_Graphs = new softCore.sportGraph({id:'tab_sportGraph',title:'Sport Graph'});
this.referenceTabPanel.add(PMI_Sport_Graphs);
this.referenceTabPanel.activate(PMI_Sport_Graphs);
displayStatusBarMessage('Displayed sport result table');
}else{
this.referenceTabPanel.activate('tab_sportGraph');
}
break;
}
},
contextmenu: function(node, e) {
node.select();
switch(node.attributes.customAttribute){
case 'personCreatorType':
// PMI_Create_Person_Menu.contextNode = node;
// PMI_Create_Person_Menu.showAt(e.getXY());
break;
case 'personType':
var PMI_Person_Menu = new softCore.personMenu({referenceTabPanel:this.referenceTabPanel});
PMI_Person_Menu.contextNode = node;
PMI_Person_Menu.showAt(e.getXY());
break;
default:
// PMI_None_Menu.contextNode = node;
// PMI_None_Menu.showAt(e.getXY());
break;
}
}
});

// call parent constructor
softCore.mainTree.superclass.constructor.call(this, config);
},

onRender:function() {
softCore.mainTree.superclass.onRender.apply(this, arguments);
}

});This class is also working well... Next part is my chart class : softCore.sportGraph...


softCore.sportGraph = new Ext.extend(Ext.chart.LineChart, {
initComponent:function() {
var config = {
xField: 'name',
yField: 'number',
store: new Ext.data.JsonStore({
url: 'graphItemFeeder.php',
root:'data',
fields: [{name: 'name'},{name: 'number'}]
})
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

softCore.sportGraph.superclass.initComponent.apply(this, arguments);
},

onRender:function() {
this.store.load({params:{year:'2006'}});
softCore.sportGraph.superclass.onRender.apply(this, arguments);
}
});Here is my JSON encoded data (loaded by the chart store with no visible error):


{
&quot;success&quot;:true,
&quot;data&quot;:[{&quot;name&quot;:&quot;50+&quot;,&quot;number&quot;:4},
{&quot;name&quot;:&quot;SUCCESS&quot;,&quot;number&quot;:161},
{&quot;name&quot;:&quot;MEDICAL&quot;,&quot;number&quot;:13},
{&quot;name&quot;:&quot;FAILED&quot;,&quot;number&quot;:13},
{&quot;name&quot;:&quot;NOT DONE&quot;,&quot;number&quot;:1}]}
I'm pretty sure that a stupid error but I can't find it for the moment...