extjs 4.1.1 - Pagination in grid on local data

Question

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}});   
 };

};

Answer 1

To load data onto a memory proxy, you have to assign the data to the proxy, then call store.load(); See https://fiddle.sencha.com/#fiddle/8ia

I got inspiration from 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();
}