Extjs 4.2.1使用分页对网格面板进行本地过滤

时间:2018-12-05 14:49:38

标签: javascript filter paging extjs4.2 extjs-grid

在这里https://fiddle.sencha.com/#view/editor&fiddle/2o8q

网络上有很多关于如何对具有分页功能的网格面板进行本地过滤的方法,但是没有人为我工作。我有以下网格

var grid = Ext.create('Ext.grid.GridPanel', {                     
                store: store, 
                bbar: pagingToolbar,
                columns: [getColumns()],
                features: [{
                    ftype: 'filters',
                    local: true,
                    filters: [getFilters()],
                }],
          }

这里的过滤器具有以下形式(只需复制粘贴的过滤器对象的一部分)

    {
        type: 'string',
        dataIndex: 'name',
        active: false
    }, {
        type: 'numeric',
        dataIndex: 'id',
        active: false
    },

商店如下

var store = Ext.create('Ext.data.Store', {
                    model: 'Store',
                    autoLoad: true,
                    proxy: {
                        data: myData,
                        enablePaging: true,
                        type: 'memory',
                        reader: {
                            type: 'array',
                        }
                    },
                });

mydata-以...的形式出现

["1245", "Joen", "Devis", "user", "", "email@com", "15/6/2017"],

["9876", "Alex", "Klex", "user", "", "email@com", "15/6/2017"],[...

我也有pageingToolbar

 var pagingToolbar = Ext.create('Ext.PagingToolbar', {
                    store: store, displayInfo: true
                });

因此,所有元素都使用我在顶部声明的存储。每个网格页面有25个元素,而myData中约有43个元素。所以现在我的网格中有2页。例如,当我在网格的第一页上并应用字符串过滤器作为名称时,它过滤第一页(25个元素),当我移至2d页时,网格也被过滤,但是在第二页的范围内。因此,每个页面分别进行过滤。选中过滤器的复选框时,我需要同时过滤所有页面,并相应地更新pageingToolbar的信息。我在做什么错了?

1 个答案:

答案 0 :(得分:0)

几乎可以肯定这是一个较晚的答案,但是我已经找到了您可能正在寻找的用于分页网格的本地存储过滤器解决方案:

https://fiddle.sencha.com/#fiddle/2jgl

它使用商店代理将数据加载到网格中,而不是在商店配置中明确指定它们。

通常:

  1. 使用下一个强制选项创建空商店
....
    proxy: {
        type: 'memory',
        enablePaging: true,
        ....
    },
    pageSize: 10,
    remoteFilter: true,
....

  1. 然后使用其代理而不是loadData将数据加载到存储中 方法
store.getProxy().data = myData;
store.reload()
  1. 应用过滤器以查看结果
store.filter([{ property: 'name', value: 'Bob' }]);

有关详细信息,请参见提供的小提琴示例中的President.js存储配置。

希望有帮助