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。