PDA

View Full Version : Problem in loading Store



Vamshi Barana
12 Dec 2013, 1:04 AM
Hi,

Store is loading only for the first time, but next time its not loading data to store..
Below is my code,


var fuelgraphPanel = [ { xtype : 'panel',
id:'fuelgraphPanel',
autoScroll : true,
height:300,
//width:500,
//autoHeight : true,
anchor : '100%,100%',
border : false,
layout:'table',
hidden:true,
//title:'fuel',
/*
* all html report Grid
*/
items : [
{
xtype: 'columnchart',
store: fuelstore,
hidden:false,
height:400,
width:600,
id:'graphpanel',
//xField: 'dist',
yField: 'fuelvalue',
xAxis: new Ext.chart.CategoryAxis({
title: 'Report Time'


}),
yAxis: new Ext.chart.NumericAxis({
title:'Fuel',
displayName: 'Fuel'



}),
tipRenderer : function(chart, record, index, series){
return ' Distance(Kms): '+Ext.util.Format.number(record.data.distvalue, '0,0')+'\n Fuel(Ltrs): ' + record.data.fuelvalue+'\n Report Time: '+record.data.timevalue;



},



series: [{
type:'line',
xField: 'fuelvalue',
// displayName: 'Fuel:',
style: {
lineAlpha: 5.0,
size:3,
// stroke: '#ffffff',
// fill: '#ffffff',
color: ["#000099"]

},


type:'line',
xField: 'timevalue',
displayName: 'time :',
grid: true,
style: {
size:3,
lineAlpha: 5.0,
color: ["#000099"]
}

}],
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
// color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
// color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},

xAxis: {
style: {
lineAlpha: 1.0,
color:'0xdfe8f6'
},
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length:7},
minorTicks: {color: 0x69aBc8, length:1},
majorGridLines: {size: 1, color: 0xeeeeee},
labelRotation: 30

// majorUnit: 1
},
yAxis: {
style: {
lineAlpha: 1.0,
color:'0xdfe8f6'
},
color: 0x69aBc8,
majorTicks: {color: 0xffffff, length:5},
minorTicks: {color: 0x000000, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
labelRotation: 30

}
},

listeners: {
itemclick: function(o){

var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('fuel'));


},

itemmouseover: function(o) {

var rec = fuelstore.getAt(o.index);
/* alert('itemmouseover'+o.index+'ff'+rec.get('fuel'));
alert('Item Selected', 'You chose {0}.'+ rec.get('fuel'));*/
},


render:function(){
var dist;
// alert('rendr'+fuelstore.getCount());

}

}

},
{


xtype: 'columnchart',
store: fuelstore,
//xField: 'dist',
id:'graphdistpanel',
hidden:true,
height:400,
width:600,
yField: 'fuelvalue',
xAxis: new Ext.chart.CategoryAxis({
title: 'Distance',
labelRenderer : function(val){/*
var value ;
for(var j=0;j<(fuelstore.getCount());j++){
fuelstore.dataStores['dist'].getById(val).data.name;
value =val+' in '+fuelstore.getAt(j).get('reportTime');
alert(value);
}
return value;
*/}




}),
yAxis: new Ext.chart.NumericAxis({
title:'Fuel',
displayName: 'Fuel'




}),
tipRenderer : function(chart, record, index, series){
return ' Distance(Kms): '+Ext.util.Format.number(record.data.distvalue, '0,0')+'\n Fuel(Ltrs): ' + record.data.fuelvalue+'\n Report Time: '+record.data.timevalue;




},




series: [{
type:'line',
xField: 'fuelvalue',
// displayName: 'Fuel:',
style: {
lineAlpha: 5.0,
size:3,
// stroke: '#ffffff',
// fill: '#ffffff',
color: ["#000099"]

},




type:'line',
xField: 'distvalue',
displayName: 'time :',
grid: true,
style: {
size:3,
lineAlpha: 5.0,
color: ["#000099"]
}


}],
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
// color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
// color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},


xAxis: {
style: {
lineAlpha: 1.0,
color:'0xdfe8f6'
},
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length:7},
minorTicks: {color: 0x69aBc8, length:1},
majorGridLines: {size: 1, color: 0xeeeeee},
labelRotation: 30

// majorUnit: 1
},
yAxis: {
style: {
lineAlpha: 1.0,
color:'0xdfe8f6'
},
color: 0x69aBc8,
majorTicks: {color: 0xffffff, length:5},
minorTicks: {color: 0x000000, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6},
labelRotation: 30

}
},


listeners: {
itemclick: function(o){


var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('fuel'));


},


itemmouseover: function(o) {


var rec = fuelstore.getAt(o.index);

},




render:function(){
var dist;
}
}
},
graphRadioGroup

]
and Below is the Error while loading fro the second time,



Uncaught TypeError: Object #<HTMLObjectElement> has no method 'setDataProvider'
Ext.chart.Chart.Ext.extend.refresh
h.Event.fire
h.Observable.fireEvent
Ext.data.Store.Ext.extend.loadRecords
Ext.data.Store.Ext.extend.loadData
Ext.Ajax.request.success
Ext.extend.handleResponse
f
m
(anonymous function)



Please anybody help in this......

greg.barry
20 Dec 2013, 12:07 PM
I believe this issue has been addressed by this thread:
http://www.sencha.com/forum/showthread.php?78788-OPEN-197-3.0.0-svn-5208-this.swf.setDataprovider-is-not-a-function/page6

One solution that came out of it is to do the following:



listeners: {
beforerefresh: function(chart) {
return Ext.isDefined(chart.swf.setDataProvider);
}
}


Thanks!
Greg