extjs 4.1.1 - 本地数据网格中的分页

Question

我对 extjs 比较陌生。我面临一个我无法解决的问题。我一直在网上搜索，但找不到答案。感谢任何帮助。

在我的代码中，我试图为网格上显示的数据添加分页。该代码对服务器进行 ajax 调用以获取数据。服务器发送的数据比需要的多。因此，客户端提取响应文本（json）的一部分，并将其显示在网格面板中。

网格可以很好地显示数据。但是分页不起作用。它总是显示“page 0 of 0”和“No data to display”。

但如果我用硬编码数据替换数据，并用硬编码数据创建存储和网格，则分页工作。所以看起来我必须在创建商店和网格时已经拥有数据。

这是简化的代码。使用 myStore1/myData1（硬编码数据）时，分页有效。将myStore1 和myData1 替换为myStore2 和myData2，在从服务器检索数据后加载，分页不起作用。

我在网上看到的所有示例都涉及硬编码数据...感谢任何见解或指针。

Ext.Loader.setConfig({
     enabled: true
    });

Ext.Loader.setPath('Ext.ux', 'ext-4.1.1/examples/ux');
Ext.require('Ext.ux.data.PagingMemoryProxy');

Ext.application({
    name: 'MS GUI',
    launch: function() {
    main();
    }
});

function main() {

  itemsPerPage = 2;

  // hardcoded data
  myData1 =  [{'xxx':'a1','yyy':'b1','zzz':'c1'},
  {'xxx':'a2','yyy':'b2','zzz':'c2'},
  {'xxx':'a3','yyy':'b3','zzz':'c3'},
  {'xxx':'a4','yyy':'b4','zzz':'c4'}];

  // data to be loaded after the ajax call
  myData2 = [];



  // define model
  Ext.define('QueryResultModel', {
  extend: 'Ext.data.Model',
  fields: [
    {name: 'xxx', type: 'string'},
    {name: 'yyy', type: 'string'},
    {name: 'zzz', type: 'string'}
  });

  // define store1
  myStore1 = Ext.create('Ext.data.Store', {
  model: 'QueryResultModel',
  storeId: 'QueryResultStore1',
  autoLoad: false,
  pageSize: itemsPerPage, 
  data: myData,    // *** use hardcoded data here, and paging works ***
  proxy : {
    type: 'pagingmemory'
    }
  });


  // define store2
  myStore2 = Ext.create('Ext.data.Store', {
  model: 'QueryResultMode',
  storeId: 'QueryResultStore2',
  autoLoad: false,
  pageSize: itemsPerPage, 
  data: {},         // *** empty data here, and once data loaded, paging does not work ****
  proxy : {
    type: 'pagingmemory'
    }
  });


function createGrid(){
   return Ext.create('Ext.grid.Panel', {
         title: 'Query Result',
         store: myStore1, // *** hardcoded data
         columns: [
            {text: 'XXX' dataIndex: 'xxx'},
            {text: 'YYY' dataIndex: 'yyy'},
            {text: 'ZZZ' dataIndex: 'zzz'}  
         ],
         dockedItem : [{
            xtype: 'pagingtoolbar',
            id: 'pagingBar_id',
            store : myStore1,  // *** use hardcoded data - paging works
            displayInfo: true,
            displayMsg: 'Displaying records {0} - {1} of {2}',
            displayMsg: "No data to display"
         }]

  });
 }; 


myContainer = Ext.create('Ext.container.Viewport', {
   id: 'mainPanel_id',
   layout: { type: 'border', padding: 5},
   renderTo: Ext.getBody(),
   items: [{
      region: 'north',
      title: 'Whatever Title Here',
      collapsible: true,
      autoHeight: true,
      // *** other congig params here       
       }, 
       {
          region: 'west',
          title: 'Query Input',   
          // other config params here

          buttons : [
            {
               text : 'Submit',
               id: 'submit_btn',
               listeners : { click: function(){ sendQuery();}
            },
            {
               text : 'Reset',
               // other config parems here
            }
          ]
       },
       {
          region: 'center',
          xtype:  'tabpanel',
          autoScroll: true,
          layout: 'fit',
          items : [ createGrid()]

       },
       // other config for other regions here
   ]
 }); 


 function sendQuery() {
   // code here to make the ajax call to the server and
   // retrive the data, if success
   // load response date into myData2
   // note: the grid and pagingtoolbar are pointing to myStore2 (by replacing the myStore1)
   myStore2.loadData(myData2, false);

   // after the sendQuery() call, the paging tool bar still shows no data... while the grid is populated with 

   // none of the followings works:
   // Ext.getCmp('pagingBar_id').doRefresh();
   // Ext.getCmp('pagingBar_id').getStore().load();
   // myStore2.load({params: {start:0}});   
 };

};

Answer 1

要将数据加载到内存代理上，您必须将数据分配给代理，然后调用store.load();参见https://fiddle.sencha.com/#fiddle/8ia

我的灵感来自http://www.sencha.com/forum/showthread.php?267955-Load-data-into-Memory-Proxy-Store

var myStoreNoData = Ext.create('Ext.data.Store', {
    model: 'QueryResultModel',
    autoLoad: false,
    pageSize: itemsPerPage,
    proxy: {
        type: 'pagingmemory'
    }
});


function sendQuery() {
    myStoreNoData.proxy.data = myData;
    myStoreNoData.load();
}