带过滤器和分页的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页中的所有过滤记录，最好通过服务器端做功能。将过滤条件传递给服务器，并获取过滤的数据并将这些数据加载到商店中。

希望答案可以帮助。如果您有任何问题，请告诉我。