title: EXT JS 5.1 - Client side pagination on grid is not working
body: <p>I am using EXT JS 5.1, in my application there is a grid panel which gets data from the grails server. I need the data to be paginated from client side i.e. all the data from the server should be retrieved at once and on click of "next" or "prev", it should not go to the server again to fetch the data. Instead it should get the local data. Is there any way to achieve this.</p>
  
  <p>I had tried with two stores. One store gets the data from the server which has the proxy of AJAX and the other store which has the proxy as MEMORY which is assigned to the grid. </p>
  
  <p>Data from AJAX proxy store is copied to the Memory proxy store and Memory proxy store is assigned to the grid so that every time the server is not hit.</p>
  
  <p>To load the data, I am using loadRawData. But this is disrupting the pagingtoolbar configurations. I tried overriding the loadRawData to reset the configuration of the store but still the paging toolbar is not showing proper results. </p>
  
  <p>Below is the code:</p>
  
  <pre><code>Ext.define('MVC.model.WorkOrderStatic', {
      extend: 'Ext.data.Model',
      fields: [
               { name: 'Selected', type: 'boolean' },
               { name: 'workOrderBatchId', type: 'string' },
               { name: 'territory', type: 'string' },
               { name: 'apo', type: 'string' },
               { name: 'eventRefId', type: 'string' },
               { name: 'product', type: 'string' },
               { name: 'Received', type: 'string' },
               { name: 'DueDate', type: 'string' },
               { name: 'priority', type: 'string' },
               { name: 'AssignedTo', type: 'string' },
               { name: 'Ready', type: 'boolean' },
               { name: 'InProgress', type: 'boolean' },
               { name: 'partial', type: 'boolean' },
               { name: 'Complete', type: 'boolean' },
               { name: 'hold', type: 'boolean' },
               { name: 'account', type: 'string' },
               { name: 'id', type: 'string' }
               ],
               idProperty: 'id'
  });
  Ext.define('MVC.model.WorkOrder', {
      extend: 'Ext.data.Model',    
      fields: [
               { name: 'Selected', type: 'boolean' },
               { name: 'workOrderBatchId', type: 'string' },
               { name: 'territory', type: 'string' },
               { name: 'apo', type: 'string' },
               { name: 'eventRefId', type: 'string' },
               { name: 'product', type: 'string' },
               { name: 'Received', type: 'string' },
               { name: 'DueDate', type: 'string' },
               { name: 'priority', type: 'string' },
               { name: 'AssignedTo', type: 'string' },
               { name: 'Ready', type: 'boolean' },
               { name: 'InProgress', type: 'boolean' },
               { name: 'partial', type: 'boolean' },
               { name: 'Complete', type: 'boolean' },
               { name: 'hold', type: 'boolean' },
               { name: 'account', type: 'string' },
               { name: 'id', type: 'string' }
               ],
               idProperty: 'id'
  });
  var datar = '';
  var jsonDataEncode= '';
  var workOrderData = '';
  //var workOrderStore = Ext.data.StoreManager.lookup('WorkOrder');
  
  var workOrderStaticStore = Ext.create('Ext.data.Store', {
      requires : [
                  'MVC.model.WorkOrderStatic',
                  ],
                  storeId: 'workOrderStatic',
                  model   : 'MVC.model.WorkOrderStatic',
                  pageSize : 4,
                  //buffered: true,
                  //autoLoad: false,
                  //autoLoad: true,
                  //data: workOrderData,
                  //data:[],
                  autoLoad: {params: {start: 0, limit: 40}},
                  proxy: {
                      type: 'memory',
  
                      reader: {
                          type: 'json',
                          rootProperty: 'workOrders'
                      },
                      enablePaging : true
                  }/*,
                            listeners:{
                            beforeload: function(store, operation, options){
                                alert("In before load of workOrderStatic");
                                  console.log("In before load of workOrderStatic");
                                  console.log(workOrderData);
                              }//End of beforeLoad listener
                            }*/
  });//end of workOrderStatic store
  var grid = Ext.create('Ext.grid.Panel', {
      alias: 'app.gridPanelAlias',
      //extend : 'Ext.grid.Panel',
      xtype  : 'WorkOrderView',
  
      title : 'Work Order Batches',
  
      //store : 'WorkOrder',
      //store: 'WorkOrderStatic',
      //store: Ext.data.StoreManager.lookup('workOrderStatic'),
      //bind: '{workOrderStatic}',
      store : workOrderStaticStore,
  
      multiSelect: true,
  
      requires: ['Ext.ux.CheckColumn',
                 'Ext.grid.*',
                 'Ext.data.*',
                 'Ext.util.*',
                 'Ext.toolbar.Paging',
                 // 'Ext.ModelManager',
                 ],
                 loadMask: true,
  
                 columns: [
                           {text:"id",width: 15,dataIndex: 'id', sortable: true},
                           {text: "Work Order Batch", width: 55, dataIndex: 'workOrderBatchId', sortable: true},
                           {text: "Territory", width: 35, dataIndex: 'territory', sortable: true}
  
                           ],
                           listeners: {
                               render: function(){
                                   alert("In render of grid");
  
                               }
                           },
  
  
                           dockedItems:
                               [
                                { xtype: 'pagingtoolbar',
                                    dock: 'bottom',
                                    displayMsg: '{0} - {1} of {2}',
                                    emptyMsg: 'No data to display',
                                    store: workOrderStaticStore,
                                    //store: 'woStatic',
                                    //store: Ext.StoreMgr.lookup('WorkOrderStatic'),
                                    displayInfo: true
                                }
                                ],
                                forceFit: true,
                                height:210,
                                split: true,
                                region: 'north'
  });
  var workOrderStore = Ext.create('Ext.data.Store', {
  
      requires : [
                  'MVC.model.WorkOrder'
                  ],
                  storeId : 'WorkOrder',
                  model   : 'MVC.model.WorkOrder',
                  pageSize : 6,
                  //buffered: true,
                  remoteSort: false,
                  //autoload: false,
                  autoLoad: false,
                  proxy: {
                      type: 'ajax',
                      url: '/CommandAndControl/workOrderList/getReadyWorkOrders',
                      actionMethods :{
                          read   : 'POST'
                      },
                      reader: {
                          type: 'json',
                          rootProperty: 'workOrders'
                      }
                  },
                  listeners:{
                      load:function(store, record, success, opts){
                          var responseText = store.proxy.reader.rawData;
                          var responseString = Ext.encode(responseText);
                      }
                  }
  });
  workOrderStore.load({
      scope   : this,
      callback: function(records, operation, success) {
          datar= new Array();
          records1 = workOrderStore.getRange();
          console.log("length of records ");
          console.log(records1.length);
          for (var i = 0; i &lt; records1.length; i++) {
              datar.push(records1[i].data);
          }//End of for loop
          jsonDataEncode = Ext.util.JSON.encode(datar);
          console.log("datar");
          console.log(datar);
          console.log("jsonDataEncode");
          console.log(jsonDataEncode);
          var jsonEncodeData= jsonDataEncode.replace(/^"(.*)"$/, '$1');
          console.log("replaced json encoded data");
          console.log(jsonEncodeData);
          var bracket1= "{";
          var bracket2= "}";
          workOrderData = bracket1.concat("workOrders").concat(":").concat(jsonDataEncode).concat(bracket2);
  
          workOrderData=Ext.JSON.decode(workOrderData);
          console.log("data1 data");
          console.log(workOrderData);
          workOrderStaticStore.loadRawData(workOrderData);
          //this.reconfigure(workOrderStaticStore, columns);
  
          //grid.reconfigure(workOrderStaticStore, workOrderData.columns);
          /*var result=workOrderStaticStore.proxy.reader.read(workOrderData);
          var records=result.records;
          workOrderStaticStore.add(records);
          workOrderStaticStore.load({add:true,
              params:{
          start:0,
          limit:4
              }
       });*/
          //workOrderStaticStore.loadRawData(workOrderData, true);
  
          //Ext.StoreMgr.lookup('WorkOrderStatic').load();
      }//End of call back
  
  });//End of workorderstore
  Ext.override(Ext.data.Store, {
      loadRawData : function(data, append){
           var me      = this,
               result  = me.proxy.reader.read(data),
               records = result.records;
  
           if (result.success) {
               me.totalCount = result.total;
               console.log("total count");
               console.log(me.totalCount);
               me.loadRecords(records, { addRecords: append });
               //me.currentPage = 2;
               me.fireEvent('load', me, records, true);
           }    
      }
  });
  
  
  
  
  Ext.define("MVC.view.WorkCenterPanel",{
      extend: "Ext.panel.Panel",
      alias: 'widget.workcenterpanel',
      requires : [
                  'Ext.grid.Panel','MVC.GridPanel','MVC.controller.WorkCenterPanel'
                  ],
                  requires: 'MVC.view.Device',
  
                  items: 
                      [
                          grid
  
                       ,
                       {
                           xtype: 'devicepanel'
                       }
                       ]  
  
  });
  </code></pre>
  
  <p>Thanks in advance!!</p>