Extjs 5.0使用靜態數據進行網格分頁

Question

分頁對於我的網格不起作用。有人請讓我知道爲什麼。我正在使用通過從控制器讀取xml獲得的靜態數據。我想每頁顯示10條記錄。

Model.js

Ext.define('Mymodel.model.settingModel', { 
    extend: 'Ext.data.Model' 
});  

Store.js

Ext.define('Mymodel.store.settingStore', { 
    extend: 'Ext.data.Store', 
    requires:['Mymodel.model.settingModel'], 
    model: 'Mymodel.model.settingModel', 
    pageSize:10, 
    lastOptions: {params: {start: 0, limit: 10}} 
}); 

View.js

Ext.define('Mymodel.view.graphPanel', { 
    extend: 'Ext.grid.Panel', 
    layout:'border', 
    alias: 'widget.graphPanel', 
    name:'graphPanel', 
    title: 'Tests', 
    store: 'Mymodel.store.settingStore', 
    pageSize:10, 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: 'Mymodel.store.settingStore', // same store GridPanel is using 
     dock: 'bottom', 
     pageSize: 10, 
     displayInfo: true 
    }] 
}); 

Controller.js

Ext.define('Mymodel.controller.myController', { 
extend:'Ext.app.Controller', 
models:['Mymodel.model.settingModel'], 
stores:['Mymodel.store.settingStore'], 
init: function() { 
Ext.Ajax.request({ 
      url: 'Sample.xml', 
      success: function(response, opts) { 
       var txt = response.responseText; 
       parser=new DOMParser(); 
       xmlDoc=parser.parseFromString(txt,"text/xml"); 

       // I now build the modelField Array, Data Array and column array based on the xml  
       got and give it to the stores. 

       var store = Ext.data.StoreManager.lookup('Mymodel.store.settingStore'); 
       store.setFields(modelfieldArr); 
       store.setData(completeDataArr); 
       store.setPageSize(10); 
       store.load({ 
        params: { 
        start: 0, 
        limit: 10 
       } 
       }); 

       var gridview = Ext.ComponentQuery.query('graphPanel')[0]; 
       gridview.reconfigure(store,columnarr); 
      } 
     }); 

    } 
    }); 

Answer 1

您應將代理設置爲memory並設置enablePaging: true。

Ext.define('Mymodel.store.settingStore', { 
    extend: 'Ext.data.Store', 
    config: { 
     proxy: { 
      type: 'memory', 
      enablePaging: true, 
      reader: 'array' 
     } 
    }, 
    requires: ['Mymodel.model.settingModel'], 
    model: 'Mymodel.model.settingModel', 
    pageSize: 10 
}); 

要加載的數據使用以下代碼：

store.getProxy().setData(data); 
store.read(); 

實施例：http://jsfiddle.net/z2x074n0/3/