EXT JS 5 本地网格过滤与客户端分页

Question

我想在本地分页的网格中添加过滤器。

我面临的问题是这个实现只过滤网格的当前页面，而不是与网格关联的整个商店数据。

在代理上使用过滤器有什么解决方法吗？或任何使其过滤器对完整商店数据起作用的方法。

提前致谢。

下面是我的网格：

Ext.define('MyApp.view.grid.FAQGrid', {
    extend: 'Ext.grid.Panel',

    xtype: 'faqQuesGrid',   
    store: 'faqQuestionsStore',
    title: 'FAQ',

    columnLines: true,
    stripeRows: true,

    columns: {
        defaults:
        {
            resizable: false
        },
        items:
        [{
            header: 'Title',
            dataIndex: 'title',
            width: '77%'
        },
        {
            header: 'Category',
            dataIndex: 'categoriesName',
            width: '10%',
            renderer: function(value) {
                return '<a href="#">' + value + '</a>';
            }
        },
        {
            header: 'Published Date',
            dataIndex: 'publishedDate',
            width: '11.5%'
        }]
    },

    plugins: [{
        ptype: 'rowexpander',
        pluginId: 'faqRowId',

        rowBodyTpl: new Ext.XTemplate (
            '<p><b>Question: </b> {question}</p>',
            '<p><br/><b>Answer: </b>',
                '<tpl if="writtenAnswer">',
                    '{writtenAnswer}',
                '</tpl>',
                '<tpl if="videoAnswer">',
                    '{videoAnswer}',
                '</tpl>',
            '</p>',
             '<p><br/><i><b>Posted on</b> {publishedDate} | <b>Filed Under</b>: {categoriesName}</i></p>',
            '<tpl if="searchTagsName">',
                '<p><i><b>Tags</b>: ',
                    '<tpl for="searchTagsName">',
                        '{.};',
                    '</tpl>',
                '</i></p>',
            '</tpl>' 
        )
    }],

    tools:
    [{
        xtype: 'button',
        text: 'Expand All',
        itemId: 'expandButtonId',
        iconAlign: 'left',
        style: 'margin: 5px'
    },{
        xtype: 'button',
        text: 'Collapse All',
        itemId: 'collapseButtonId',
        iconAlign: 'left',
        style: 'margin: 5px'
    },{
        xtype: 'textfield',
        itemId: 'searchItem',
        allowBlank: false,
        emptyText: 'Search FAQ',
        style: 'margin: 5px'
    },{
        baseCls: 'search-icon',
        itemId: 'searchIconId',
        height: 20,
        iconAlign: 'right',
        tooltip: 'Search Grid',
        style: 'margin: 5px'
    }],

    dockedItems: 
    [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        store: 'faqQuestionsStore',
        itemId: 'faqPagingToolbarId',
        displayInfo: true,
        displayMsg: 'Displaying questions {0} - {1} of {2}',
        emptyMsg: "No questions to display",
    }],

    listeners: {
        cellclick : function(grid, rowIndex, cellIndex, record, e) {
            if(cellIndex == 2){
                var clickedDataIndex = grid.headerCt.getGridColumns()[cellIndex].dataIndex;
                var clickedCellValue = record.get(clickedDataIndex);
                MyApp.app.getController('MyApp.controller.CategoriesController').getCategoryQuestions(clickedCellValue);
            }
        }
    }
});

商店：

Ext.define('MyApp.store.FAQQuestionsStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.QuestionsModel',
    requires: [
            'MyApp.model.QuestionsModel'
            ],

    storeId: 'faqQuestionsStore',
    autoLoad: false,
    remoteSort: true,
    remoteFilter: false,

    pageSize: 25,

    proxy: {
        type: 'memory',
        enablePaging: true,

        reader: {
            type: 'json'
        }
    }   
});

我正在执行过滤如下：

this.control({
            'faqQuesGrid #searchItem':{
                change: this.filterQuestions
            }
}); 

filterQuestions: function(textfield) {
        var grid = textfield.up('panel');
        var store = grid.getStore();
        if(store != null) {
            //clear filters first
            store.remoteFilter = false;
            store.clearFilter(true);

            var filters = new Array();

            //add filter to filter array
            if(textfield.isValid()){
                var searchTxt = textfield.getValue();

                //create filter and add to filters array
                var questionFilter = {
                    property: 'question',
                    anyMatch: true,
                    caseSensitive: false,
                    value   : searchTxt
                };

                filters.push(questionFilter);
            } else{
                 store.read();
            } 
            //else condition is necessary to populate the grid correctly when a search query is removed

            //add filters to store
            if(filters.length > 0){
                store.addFilter(filters);
            }
        }
    },

//to remove any filters added when we leave this page to prevent issues with other page functionality
deactivate: function(){
                    var store = Ext.getStore('faqQuesStore');
                    if(store != null){
                        store.clearFilter();
                    }

                }

Answer 1

正如 Evan Trimboli 在 cmets 中提到的问题，您必须设置 remoteFilter: true 用于存储以使用内存代理过滤整个数据集。

过滤是在代理中“远程”进行的。它就像一个服务器。本地过滤意味着在商店中进行过滤。远程意味着它由代理处理。

我要注意Ext.data.proxy.Memory.read 使用Ext.util.Filter.createFilterFn 根据传递的 Ext.util.Filter[]（带有属性值配置）创建过滤函数：

// Filter the resulting array of records 
if (filters && filters.length) {
    // Total will be updated by setting records 
    resultSet.setRecords(records = Ext.Array.filter(records, Ext.util.Filter.createFilterFn(filters)));
    resultSet.setTotal(records.length);
}

所以，如果你想使用不同的过滤逻辑，你可以重写 memroy 代理读取方法并使用自定义函数来创建过滤函数。以this answer 为例。