Fatal编程技术网
  • json/
  • Ext JS 5 JSON存储数据：筛选器配置不工作

Ext JS 5 JSON存储数据：筛选器配置不工作

json mvvm

Ext JS 5 JSON存储数据：筛选器配置不工作,json,mvvm,datastore,extjs5,Json,Mvvm,Datastore,Extjs5,我遇到了一些关于ExtJS5过滤器配置的问题。我在我的应用程序中使用了MVVM架构，我从最新的Sencha的执行仪表板中复制了一个使用MVVM的示例。代码如下： StoreModel: Ext.define('ExecDashboard.model.Kpi', { extend: 'ExecDashboard.model.Base', fields: [ 'category', 'name', 'data1', 'data2', 'data3',

我遇到了一些关于ExtJS5过滤器配置的问题。我在我的应用程序中使用了MVVM架构，我从最新的Sencha的执行仪表板中复制了一个使用MVVM的示例。代码如下：

StoreModel:

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);
}});
商店：

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);
}});
视图模型：

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);
}});
控制器：

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按钮不再工作

我将商店重新创建为如下内容：

（新）商店

members\u util\u 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文件。

不需要回答这个问题，因为我已经找到了解决方案，它应该是“remoteFilter”：false

不需要回答这个问题，因为我已经找到了解决方案，它应该是remoteFilter:false