时间戳

首页 > 解决方案 > Extjs 4.2.1 带有分页的网格面板的本地过滤

javascript - Extjs 4.2.1 带有分页的网格面板的本地过滤

问题描述

摆弄问题在这里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"],[...

我也有分页工具栏

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

所以所有元素都使用我在顶部声明的商店。每个网格页面有 25 个元素，myData 中有大约 43 个元素。所以现在我的网格中有 2 页。例如，当我在网格的第一页并为名称应用字符串过滤器时，它会过滤第一页（25 个元素），当我移动到 2d 页面时，网格也会被过滤，但在第二页的范围内。因此，每个页面都是单独过滤的。当我选中过滤器复选框时，我需要同时过滤所有页面，并相应地更新 pagingToolbar 的信息。我做错了什么？

标签： javascriptfilterpagingextjs4.2extjs-grid

解决方案

几乎可以肯定这是一个迟到的答案，但我找到了您可能正在寻找的分页网格的本地商店过滤器解决方案：

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 存储配置。

希望能帮助到你

推荐阅读