Extjs 4.1.1 - pagination in the grid according to local data

Question

I am relatively new to extjs. I ran into a problem that I cannot solve. I searched the Internet but could not find the answer. Appreciate any help.

In my code, I am trying to add pagination to the data displayed in the grid. The code makes an ajax call for the server to receive data. The server sends more data than necessary. Thus, the client extracts part of the response text (json) and displays it in the grid panel.

The grid displays the data in order. But pagination does not work. It always shows "Page 0 of 0" and "There is no data to display."

But if I substitute data with hard-coded data and create a storage and grid with hard-coded data, pagination will be performed. It looks like I already have data when the storage and the grid are being created.

Here's a simplified code. When using myStore1 / myData1 (hardcoded data) swap works. Replacing myStore1 and myData1 with myStore2 and myData2, which is loaded after receiving data from the server, paging does not work.

All the examples that I see on the Internet relate to hard-coded data ... Appreciate any understanding 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

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