EXT JS 4グリッドフィルターとページネーション

Question

私は、ブラウザ側でページネーションとフィルタリングを持つext jsグリッドを持っています。たとえば、3ページがある場合、最後のページレコードを表示するためにフィルタを適用します。次に、1ページ目と2ページ目の空白が表示され、フィルタリングされたデータが最後のページに表示されます。私はあなたの参照のために以下のコードをコピーしました。ここで間違っていることをお勧めしますか？

<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

ご質問のとおり、店舗の問題はデータを表示するために2つの制限があります。

最初のページ番号はページ番号に由来し、ページ番号は1ページサイズのデータ​​のみを表示するように定義されています（最大10件）。ページ区切りの制限のため、フィルタ機能は現在のページの下にある10個のレコードにのみ適用されます。

このフィルターは、ストアの別のプロパティです。別のページに切り替えるときに手動で削除しなかった場合は、すべてのページに適用されます。あなたの説明として、私はあなたのページ1とページ2はレコードがあなたのフィルタ条件を満たしていないと信じています。そのため、ページ3のレコードしか見ることができません。

すべてのレコード（ページ1 + 2 + 3）に対してフィルタを実行し、ページ1のすべてのフィルタリングされたレコードを表示する場合は、サーバー側から機能を実行する。フィルター条件をサーバーに渡し、フィルターを適用したデータを戻して、これらのデータをストアにロードします。

答えが役に立ちそうです。ご質問がある場合は、私に教えてください。