[英]Extjs chart picking wrong Store?
我正在尝试并排绘制两个图表,这些图表将通过传递不同的参数来使用同一商店,但是两个图表都使用第二商店的值。 我可以在Chrome控制台中看到响应,它适合两个请求和不同的响应; 下面是我的代码。
Ext.define('testUtility.view.BarChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barChart',
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/store1',
reader: {
type: 'json',
root: 'Data'
},
filterParam: undefined,
groupParam: undefined,
pageParam: undefined,
startParam: undefined,
sortParam: undefined,
limitParam: undefined
}
}),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Master'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
app.js
Ext.application({
requires: [
'Ext.container.Viewport'
],
name: 'BAR Chart ',
launch: function() {
var chart1 = Ext.create('testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%'
});
var store1 = chart1.getStore();
store1.proxy.extraParams = {
id: chart1.id
};
store1.load();
var chart2 = Ext.create('testUtility.view.BarChart', {
id: 'chart2',
height: 300,
width: '50%'
});
var store2 = chart2.getStore();
store2.proxy.extraParams = {
id: chart2.id
};
store2.load();
}
});
这两个图表均显示了来自商店的数据,无论以后加载哪个。
当您在定义中调用它们时,两家商店都是同一家。 创建类的实例时应调用存储,如下所示:
var chart1 = Ext.create( 'testUtility.view.BarChart', {
id: 'chart1',
height: 300,
width: '50%',
store: store1
} );
定义自己的商店是一个好习惯:
Ext.define( 'testUtility.store.BarChart', {
extend: 'Ext.data.Store',
...
} );
然后在代码的第一部分之前使用它:
var store1 = Ext.create( 'testUtility.store.BarChart', { options } );
您的options
包括Extraparams,这对于2家商店而言是不同的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.