我遇到了一些关于 Ext JS 5 过滤器配置的问题。我为我的应用程序使用了 MVVM 架构我使用 MVVM 从最新的 Sencha 的 Executive Dashboard 复制了一个示例。代码在这里:
店铺型号:
Ext.define('ExecDashboard.model.Kpi', {
extend: 'ExecDashboard.model.Base',
fields: [
'category',
'name',
'data1',
'data2',
'data3',
'data4',
'data5'
]});
店铺:
Ext.define('ExecDashboard.store.Kpi', {
extend: 'Ext.data.Store',
alias: 'store.kpi',
model: 'ExecDashboard.model.Kpi',
remoteFilter: true,
proxy: {
type: 'memory',
reader: 'array',
data: [
[85,"redemption","April 2013", 97.71415293, 42.80623324 ],
[86,"redemption","May 2013", 103.9686145, 53.72375476 ],
[87,"redemption","June 2013", 85.34685203, 38.82037102 ],
[88,"redemption","July 2013", 98.73416455, 62.15346433 ],
[89,"redemption","August 2013", 75.32157973, 23.66379738 ],
[90,"redemption","September 2013", 89.72719705, 62.24478753 ],
[91,"redemption","October 2013", 81.8442231, 40.25135437 ],
[92,"redemption","November 2013", 101.3772379, 22.24866309 ],
[93,"redemption","December 2013", 75.63304388, 60.02298886 ],
[94,"redemption","January 2014", 97.43899851, 31.43154371 ],
[95,"redemption","February 2014", 93.51713151, 30.88595132 ],
[96,"redemption","March 2014", 83.14395398, 58.95084719 ],
[97,"redemption","April 2014", 66.7850417, 14.93916416 ],
[98,"redemption","May 2014", 60.9905471, 51.16786536 ],
[99,"redemption","June 2014", 54.65355603, 41.00113419 ],
[100,"sales","May 2010", 39.31109289, 57.59563546 ],
[101,"sales","June 2010", 40.91728573, 42.88747711 ],
[102,"sales","July 2010", 58.94113927, 23.32729559 ],
[103,"sales","August 2010", 52.95083591, 24.33871661 ],
[104,"sales","September 2010", 21.11758313, 29.60587097 ],
[105,"sales","October 2010", 53.53800894, 30.04906835 ]
]
视图模型:
Ext.define('ExecDashboard.view.kpi.KpiModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.kpi',
requires: [
'ExecDashboard.model.Kpi',
'ExecDashboard.store.Kpi'
],
data: {
// This property is placed in the ViewModel by routing
// kpiCategory: null
},
stores: {
kpiMain: {
type: 'kpi',
autoLoad: true,
filters: {
property: 'category',
value: '{kpiCategory}'
}
}
}});
控制器:
Ext.define('ExecDashboard.view.kpi.KpiController', {
extend: 'Ext.app.ViewController',
alias: 'controller.kpi',
init: function (view) {
// We provide the updater for the activeState config of our View.
view.updateActiveState = this.updateActiveState.bind(this);
},
onToggleKpi: function(button) {
if (button.pressed) {
var view = this.getView();
view.setActiveState(button.filter);
}
},
updateActiveState: function (activeState) {
var refs = this.getReferences();
var viewModel = this.getViewModel();
refs[activeState].setPressed(true);
viewModel.set('kpiCategory', activeState);
this.fireEvent('changeroute', this, 'kpi/' + activeState);
}});
->上面的代码工作正常,包括过滤,如果数据在商店内声明为内联,但是如果我在 json 文件中转换确切的数据,过滤功能不再工作,虽然没有指示错误,数据显示但 onclick 按钮没有工作时间更长。
我将商店重新创建为如下所示:
(新)商店
Ext.define('ExecDashboard.store.Kpi', {
extend: 'Ext.data.Store',
alias: 'store.kpi',
storeId:'Kpi',
requires:['ExecDashboard.model.Kpi'],
model: 'ExecDashboard.model.Kpi',
remoteFilter: true,
buffered: true,
pageSize: 100,
remoteSort: true,
proxy: {
type: 'ajax',
reader: 'json',
url: 'resources/data/members_util_costcount.js',
autoLoad: true
}});
members_util_costcount.js
[
{ "category": "redemption", "name": "May 2010", "data1": 105.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "June 2010", "data1": 250.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "July 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "August 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "September 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "October 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "November 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "December 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "January 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "February 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "March 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "April 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name":"May 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "June 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "July 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "redemption", "name": "August 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 350.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "June 2010", "data1": 500.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "July 2010", "data1": 700.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "August 2010", "data1": 800.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "September 2010", "data1": 900.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "October 2010", "data1": 1000.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "November 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "December 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "January 2011", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{ "category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{ "category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{ "category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{ "category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 },
{"category": "sales", "name": "May 2010", "data1": 53.34321776, "data2": 100.1152082 }
]
这是一个错误吗?我没有做很多修改,我只是将内联数据存储转换为 JSON 文件。