PDA

View Full Version : update pie fields after store load



rans
2 Dec 2012, 6:36 AM
Hi,

I am building an sencha-extjs app.
I have a pie with fields of continents names. I am using a listener of mouse down, when I click on one of the continents fields it will change the store url (a json file that contains the countries of the continent).
I am updating the store but using the same chart.
Now the pie chart is update but some of the field names from the previous chart are still there (only the name field).
I think that the reason for the issue is: if in the previous chart I had 6 fields that were rendering and now I have only 4 fields the chart will take 2 fields from the previous chart (6-4 = 2) and render only the name of them.
The same problem happens when I want to filter my chart.

I add the code and screen capture

code:
Ext.define('FB.view.user.IpChartView', {


extend: 'Ext.panel.Panel',
alias: 'widget.IpChartView',


requires: [
'Ext.data.JsonStore',
'Ext.chart.theme.Base',
'Ext.chart.series.Series',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.*'
],


initComponent: function(){


Ext.apply(this, {


layout: 'fit',
id: 'ipChartId',
flex: 1,
height: 500,
width: 800,
border: false,
items: {
xtype: 'chart',

animate: true,
store: 'ipChartStore',
shadow: true,
theme: 'Base:gradients',
legend: {
position: 'bottom'
},
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 180,
height: 28,
// set the text with country and precent of her
renderer: function(storeItem, item) {

var dataItem = storeItem.get('data1');
var storeIng = storeItem.store;
var total = 0;
storeIng.each(function(rec) {
total += rec.get('data1');
});
// get the precent and round it
var currentPrecent = Math.round(dataItem / total * 100 * 100) / 100;
var outputString = storeItem.get('name') + ' ('
+ storeItem.get('data1') + ") : "
+ currentPrecent + '%';


this.setTitle(outputString);
},

},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},

listeners: {
itemmousedown: function(storeItem, item){
debugger;
var newChartName = storeItem.storeItem.data.name;
var storeIng = storeItem.storeItem.store;
storeIng.load({
url: serverAddress + newChartName + ".json",
callback: function(records, operation, success) {
if(success) {
var url = storeIng.getProxy().url;
// push the first chart in
if (chartStack.length === 0) {
chartStack.push("ipChart.json");
} else {
chartStack.push(url);
}
// change the url
storeIng.getProxy().url = newChartName + ".json";
}
},
});


}
}


}]
}
});


this.callParent(arguments);
}
});

4049940500

mitchellsimoens
4 Dec 2012, 7:32 AM
What Ext JS 4.x.x version are you using?

rans
20 Dec 2012, 1:12 AM
ext-4.0.7-gpl