單擊下一個按鈕時分頁不會更新視圖

分頁中正確顯示行的總數，但單擊下一個按鈕時分頁不會更新視圖。單擊下一個按鈕時分頁不會更新視圖

我是新來的煎茶。在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', 
      }, 
     });

商店：Personnel.js

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: "[email protected]", phone: "555-111-1111" }, 
     //  { name: 'Worf', email: "[email protected]", phone: "555-222-2222" }, 
     //  { name: 'Deanna', email: "[email protected]", phone: "555-333-3333" }, 
     //  { name: 'Data', email: "[email protected]", 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', 
     //  } 
     // }, 

});

來源

2017-09-27 santhosh karthik

您使用的儲存方式，ExtJS的會每次更改頁面時做的請求，發送設置爲商店的網址的頁碼參數。

如果您想使用ExtJS進行客戶端分頁，您必須將商店的代理類型設置爲memory，將數據加載到商店中，然後ExtJS Grid將按照您的預期處理分頁。

做一個Ext.Ajax.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(); 
    } 
});

來源

2017-09-27 18:34:02

感謝您的回覆。實際上，存在跨域問題。所以我使用JsonP。 Ajax不適用於跨域請求。 –

對於交叉結構域，可以使一個呼叫到Ext.data.JsonP.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。

來源

2017-09-28 13:39:19

對於我來說，成功不是在代理內部或外部工作，我已經給出alert或console.log，但不能進入Success函數。您正在使用Ext.data.JsonP.request，請告訴我如何使用代理編寫。 –

我使用了Ext.data.JsonP.request（），因爲您的需求是做客戶端分頁。爲此，示例小提琴首先獲取完整的數據集，然後使用內存代理進行分頁。如果你想在每次點擊下一個按鈕時發送部分數據，那麼這個[小提琴]（https://fiddle.sencha.com/#view/editor&fiddle/27go）就可以做到。它使用jsonp代理並完美工作，但分頁不起作用，因爲沒有服務器端代碼來處理請求中的分頁信息。（後端代碼發送完整的數據集。） –

[Here's]（https://fiddle.sencha.com/#view/editor&fiddle/27n6）另一個例子。參考（http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grid/paging.html） –

BBAR：{ 店：{ 類型： '人才'， }， 的xtype： 'pagingtoolbar'， displayInfo：真 }，

我已刪除了店內BBAR和它的工作原理。感謝您的合作。

來源

2017-10-04 09:43:43

單擊下一個按鈕時分頁不會更新視圖

回答

相關問題