帶過濾器和分頁的EXT JS 4 Grid

Question

我在瀏覽器端有一個帶分頁和過濾的ext js網格。例如，如果有3頁，我應用過濾器來顯示最後一頁的記錄。然後顯示第一頁和第二頁空白，過濾後的數據顯示在最後一頁上。我已經複製下面的代碼供您參考。你能提出這裏有什麼問題嗎？

<script> 
    Ext.Loader.setConfig({enabled: true}); 
    Ext.Loader.setPath('Ext.ux', '/extjs4/ux'); 

    Ext.require([ 
     'Ext.ux.grid.FiltersFeature' 
    ]); 

     Ext.Loader.setConfig({enabled: true}); 

     Ext.onReady(function() { 

      Ext.QuickTips.init(); 
      Ext.tip.QuickTipManager.init(); 

      var data2='jsonData from Server'; 

      var mod2= Ext.define('Model', { 

       extend: 'Ext.data.Model', 
       fields: [ 
        {name:'ID',mapping:'ID'} , 
        {name:'Creation Date/Time',mapping:'Creation Date/Time'} , 
        {name:'Unit',mapping:'Unit'} 
        ]   
      }); 

      var storeMain2 = Ext.create('Ext.data.Store', { 
       model: mod2, 
       autoLoad: false, 
       buffered: false, 
       pageSize: 10, 
       data: Ext.decode(data2), 
       proxy: { 
        type: 'pagingmemory', 
        reader: { 
         type: 'json', 
         root: 'user' 
         //totalProperty: 'totalCount' 
        } 
       }, 
       remoteSort:true, 
       remoteFilter:true, 
       remoteGroup:true 
      }); 

      var filters = { 
        ftype: 'filters', 
        autoReload: false, 
        encode: true, 
        local: true 
       }; 

// grid with pagination 
      var grid2 = Ext.create('Ext.grid.Panel', { 
       stateful: true, 
       multiSelect: true, 
       enableColumnMove:false, 
       store: storeMain2, 
       stateId: 'stateGrid', 
       autoHeight: true, 
       autoWidth: true, 
       title: ' ', 
       columnLines: true, 
       renderTo: Ext.getBody(), 
       features: [filters], 
       filterable: true, 

      columns: [ 
        { 
         text  : 'ID', 
         sortable : true, 
         align:'center', 
         width: 70, 
         dataIndex: 'ID', 
         filter: { type: 'numeric'} 
        }, { 
         text  : 'Creation Date/Time', 
         width: 150, 
         sortable : true, 
         align:'center', 
         dataIndex: 'Creation Date/Time' 
        }, { 
         text  : 'Unit', 
         width: 150, 
         sortable : true, 
         align:'center', 
         dataIndex: 'Unit' 
        } 
       ], 
       listeners: { 

          'afterrender':function(e){ 
           var gridthWidth = this.getWidth(); 
           this.setWidth(gridthWidth); 
           this.setAutoScroll(true); 
          }, 
          'columnresize': function(e){ 
           var gridthWidth = this.getWidth(); 
           this.setWidth(gridthWidth); 
           this.setAutoScroll(true); 
          } , 
          render: function(e) { 
           this.store.on('load',function(){ 

           });   
          } 
         }, 
      bbar: Ext.create('Ext.PagingToolbar', { 
       store: storeMain2, 
       displayInfo: true, 
       emptyMsg: "" 

      })   
     });    
    }); 

</script> 

Answer 1

作爲您的問題，由於您的商店造成的問題有兩個顯示數據的限制。

第一個來自分頁，分頁的屬性定義爲只顯示一個頁面大小的數據（在你的情況下最大爲10）。由於分頁限制，過濾功能僅適用於當前頁面下的10條記錄。

該過濾器是該商店的另一個屬性。如果在切換到另一個頁面時沒有手動刪除它，它將應用於每個頁面。作爲你的描述，我相信你的第1頁和第2頁沒有任何記錄符合你的過濾條件，只有第3頁。這就是您只能在第3頁看到記錄的原因。

如果您想對所有記錄（頁面1 + 2 + 3）執行過濾並顯示第1頁中的所有過濾記錄，最好通過服務器端做功能。將過濾條件傳遞給服務器，並獲取過濾的數據並將這些數據加載到商店中。

希望答案可以幫助。如果您有任何問題，請告訴我。