extjs 4.1.1 - 本地数据的网格分页(extjs 4.1.1 - Pagination in grid on local data)

 我对extjs比较陌生。 我遇到了一个我无法解决的问题。 我一直在网上搜索但无法找到答案。 感谢任何帮助。 
 
 在我的代码中，我试图为网格上显示的数据添加分页。 代码对服务器进行ajax调用以获取数据。 服务器发送的数据超出了需要。 因此，客户端提取响应文本（json）的一部分，并将其显示在网格面板中。 
 
 网格显示数据正常。 但是分页不起作用。 它总是显示“0页0”和“无数据显示”。 
 
 但是，如果我用硬编码数据替换数据，并使用硬编码数据创建存储和网格，则分页有效。 因此，在创建商店和网格时，我似乎已经拥有了数据。 
 
 这是简化的代码。 使用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}});   
 };
 
 }; 

I am relatively new to extjs. I am facing a problem that I can not resolve. I have been searching online but unable to find the answer. Appreciate any help.
 
In my code, I am trying to add pagination to the data displayed on the grid. The code makes an ajax call to the server to get the data. The server sends more data than needed. So the client extracts the portion of the response text (json), and displays it in a grid panel. 
 
The grid displays the data fine. But the pagination is not working. It always shows "page 0 of 0" and "No data to display".
 
But if I substitute the data with hardcoded data, and create the store and grid with the hardcoded data, the pagination works. So it seems like I must already have the data when the store and the grid are being created. 
 
Here's the simplified code. When using myStore1/myData1 (hardcoded data), paging works. Replacing myStore1 and myData1 with myStore2 and myData2, which is loaded after data is retrieved from the server, paging does not work.
 
All the examples I see online deals with hardcoded data...Appreciate for any insight or pointer.
 
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}});   
 };
 
};

原文：https://stackoverflow.com/questions/25166052