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在您的问题的评论中提到的那样，您必须为商店设置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。

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

1 个答案: