i added paging but .all records dispalying in same page.i need to change dynamically

Question

this is my store 

this is my view all records are showing in sigle page next button click what to change dynamically thats not working. i added pageing but .all records dispalying in same page.i need to change dynamically

can any one help

    var store = Ext.create('Ext.data.Store', {
         fields: ['name','email'],
            pageSize : 10,
            data: [
                   {name: 'Name1',    email: 'ed@sencha.com'},
                   {name: 'Name2',    email: 'tommy@sencha.com'},

                   {name: 'Name3',    email: 'ed@sencha.com'},
                   {name: 'Name4',    email: 'tommy@sencha.com'},
                   {name: 'Name5',    email: 'ed@sencha.com'},
                   {name: 'Name6',    email: 'ed@sencha.com'},
                   {name: 'Name7',    email: 'tommy@sencha.com'},

                   {name: 'Name8',    email: 'ed@sencha.com'},
                   {name: 'Name9',    email: 'tommy@sencha.com'},
                   {name: 'Name10',    email: 'ed@sencha.com'},
                   {name: 'Name11',    email: 'ed@sencha.com'},
                   {name: 'Name12',    email: 'tommy@sencha.com'},

                   {name: 'Name13',    email: 'ed@sencha.com'},
                   {name: 'Name14',    email: 'tommy@sencha.com'},
                   {name: 'Name15',    email: 'ed@sencha.com'},
                   {name: 'Name16',    email: 'ed@sencha.com'},
                   {name: 'Name17',    email: 'tommy@sencha.com'},

                   {name: 'Name18',    email: 'ed@sencha.com'},
                   {name: 'Name19',    email: 'tommy@sencha.com'},
                   {name: 'Name20',    email: 'ed@sencha.com'},
                   {name: 'Name21',    email: 'ed@sencha.com'},
                   {name: 'Name22',    email: 'tommy@sencha.com'},

                   {name: 'Name23',    email: 'ed@sencha.com'},
                   {name: 'Name24',    email: 'tommy@sencha.com'},
                   {name: 'Name25',    email: 'ed@sencha.com'},
                   {name: 'Name26',    email: 'ed@sencha.com'},
                   {name: 'Name27',    email: 'tommy@sencha.com'},

                   {name: 'Name28',    email: 'ed@sencha.com'},
                   {name: 'Name29',    email: 'tommy@sencha.com'},
                   {name: 'Name30',    email: 'ed@sencha.com'},
                   {name: 'Name31',    email: 'ed@sencha.com'},
                   {name: 'Name32',    email: 'tommy@sencha.com'},

                   {name: 'Name33',    email: 'ed@sencha.com'},
                   {name: 'Name34',    email: 'tommy@sencha.com'},
                   {name: 'Name35',    email: 'ed@sencha.com'},



            ]

        });

this is my view

    Ext.define('AM.view.user.List' ,{
        extend: 'Ext.grid.Panel',
        alias: 'widget.userlist',

        title: 'All Users',





        initComponent: function() {

            Ext.create('Ext.grid.Panel', {
              title: 'Column Demo',
              store:store,
              columns: [
                  {header: 'Name',  dataIndex:'name',flex:1},
                  {text: 'Email',  dataIndex:'email',flex:1},

              ],

             renderTo:'example-grid',
             width: 350,
             height: 280,
          dockedItems: [{
              xtype: 'pagingtoolbar',   // paging
              store: store,   // same store GridPanel is using
              dock: 'bottom',  
              pageSize: 10,
              displayInfo: true
          }],






              renderTo: Ext.getBody()
            });


          this.callParent(arguments);
      }



    });

this is my view all records are showing in sigle page next button click what to change dynamically thats not working. i added pageing but .all records dispalying in same page.i need to change dynamically

can any one help

Answer 1

Is you data always going to be local? If yes, you can configure paging on an in-memory data set with the memory proxy. In Ext JS 4, you can use the Ext.ux.data.PagingMemoryProxy. In Ext JS 5, this functionality has been incorporated into the Ext.data.proxy.Memory class via enablePaging:true:

// for Ext JS 5
mystore = Ext.create('Ext.data.Store', {
   fields: [...],
   data: [...],
   proxy: {
      type: 'memory',
      enablePaging: true
   }
})

Be aware, however, that this will only work if your dataset is in-memory. If your store is going to be loaded via a server proxy, then you'll need to follow the suggestions already provided.

Answer 2

In Ext js we can't implement paging only at client side.Please go through the post.. paging in extjs 4 grid is not working and through the sencha docs as wells