次のボタンがクリックされたときにページングがビューを更新しない

Question

ページングで行の総数が正しく表示されていますが、次のボタンがクリックされたときにページングが更新されません。

私はSenchaを新しくしました。 Mysqlでは、すべての行が返されます。私はクライアント側で制限することができますように。バックエンドの行を制限すると、クライアント側のすべての行を持つことができません。

ビュー：List.js

/*** This view is an example list of people. 
    */ 



Ext.define('CRUD.view.main.List', { 
      extend: 'Ext.grid.Panel', 
      xtype: 'home', 
      requires: [ 
       'CRUD.store.Personnel' 
      ], 

      title: 'Heroes', 
      plugins: [ 
       Ext.create('Ext.grid.plugin.CellEditing', { 
        clicksToEdit: 1 
       }) 
      ], 
      layout: 'fit', 
      fullscreen: true, 
      store: { 
       type: 'personnel', 
      }, 
      columns: [ 
       { text: 'Name', dataIndex: 'name', sortable: true, flex: 1 }, 
       { text: 'Email', dataIndex: 'email', sortable: true, flex: 1 }, 
       { text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 } 
      ], 
      bbar: { 
       store: { 
        type: 'personnel', 
       }, 
       xtype: 'pagingtoolbar', 
       displayInfo: true 
      }, 
      // columns: [ 
      //  { text: 'Name', dataIndex: 'name', flex: 1 }, 
      //  { text: 'Email', dataIndex: 'email', flex: 1 }, 
      //  { text: 'Phone', dataIndex: 'phone', flex: 1 } 
      // ], 

      listeners: { 
       select: 'onItemSelected', 
      }, 
     }); 

ストア：

Ext.define('CRUD.store.Personnel', { 
     extend: 'Ext.data.Store', 

     alias: 'store.personnel', 

     model: 'CRUD.model.User', 

     id: 'list', 

     fields: [ 
      'name', 'email', 'phone' 
     ], 

     // data: [ 
     //  { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" }, 
     //  { name: 'Worf', email: "worf.moghsson@enterprise.com", phone: "555-222-2222" }, 
     //  { name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" }, 
     //  { name: 'Data', email: "mr.data@enterprise.com", phone: "555-444-4444" } 
     // ], 
     autoLoad: { 
      start: 0, 
      limit: itemsPerPage 
     }, 
     buffered: true, 
     pageSize: itemsPerPage, 
     remoteSort: true, 
     proxy: { 
      type: 'jsonp', //cross domain calls - json parser 
      url: 'http://localhost:8080/list', 
      enablePaging: true, 
      reader: { 
       type: 'json', 
       totalProperty: 'total' 
      }, 

     }, 
     // proxy: { 
     //  type: 'memory', 
     //  reader: { 
     //   type: 'json', 
     //  } 
     // }, 

}); 

Answer 1

あなたが店を使用している方法Personnel.js、ExtJSの要求にあなたがページを変更するたびに行います、送信ストアに設定されたURLのページ番号パラメータ。

ExtJSを使用してクライアントサイドページネゴシエーションを行う場合は、ストアのプロキシタイプをmemoryに設定し、データをストアにロードしてから、ExtJSグリッドが期待通りにページングを処理する必要があります。あなたはExt.data.JsonP.request（）メソッドへの呼び出しを行うと、以下のコードに示すように応答を処理することができ、クロスドメインの場合

Ext.Ajax.request({ 
    url: 'http://localhost:8080/list', 
    success: function(response) { 
     dataStore.setProxy({ 
      type: "memory", 
      enablePaging: true, 
      data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure 
     }); 
     dataStore.load(); 
    } 
}); 

Answer 2

：

ようなExt.Ajax.Requestの操作を行います。

Ext.data.JsonP.request({ 
     url: 'data1.json', 
     success: function (response) { 
      var myData = []; 
      Ext.Array.forEach(response.data, function (item) { 
       myData.push({ 
        name: item.name, 
        email: item.email, 
        phone: item.phone 
       }); 
      }); 
      store.setProxy({ 
       type: "memory", 
       enablePaging: true, 
       data: myData 
      }); 
      store.load(); 
     } 
    }); 

完全な使用例を確認するには、このfiddleを確認してください。

Answer 3

BBAR：{ 店舗：{ タイプ： '要員' }、 XTYPE 'pagingtoolbar' displayInfo：真 }、

IはBBAR内部ストアを除去して、それが動作します。協力してくれてありがとう。