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在对你的问题的评论中提到，你必须设置remoteFilter: true存储以使用内存代理过滤整个数据集。

过滤在代理中“远程”发生。它就像一台服务器。本地过滤意味着在商店中进行过滤。远程方式让它由代理处理。

我想指出，Ext.data.proxy.Memory.read使用Ext.util.Filter.createFilterFn创建过滤器功能基于传递Ext.util.Filter []（带有属性值CONFIGS）：

// 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。