extjs - Ext js Grid Pagination -

i new ext js , have tried example ext js docs, unable pagination.

i have designed application using mvc architecture.

here code:

title : 'trade data', store : 'ramdatastore', id:'tradedatagrid', dockeditems:[{     xtype:'pagingtoolbar',     store:'tradedatastore',     displayinfo:true,     id:'tradepage',      itemid:'tradepage',      displaymsg:'{0}-{1} of {2}',      emptymsg:'no topics show',      dock:'bottom'}      ],      columns : [       {            xtype : 'gridcolumn',            width : 85,align : 'center',            dataindex : 'tradeid',            text : 'tradeid'       },       {            xtype : 'gridcolumn',            width : 120,            dataindex : 'instrumenttype',            text : 'instrumenttype'       },       {            xtype : 'gridcolumn',            width : 103, align : 'center',            dataindex : 'tradebook',            text : 'tradingbook'       },       {            xtype : 'gridcolumn',            width : 120, align : 'center',            dataindex : 'otherbook',            text : 'customerbook'       },  ] 

here paging tool bar store , grid store same.

store:

i defined store default properties , created instance same store in controller dynamically bind.

ext.define('myapp.store.ramdatastore', {     extend: 'ext.data.store',     requires: ['myapp.model.ram.ramdatamodel'],     constructor: function(cfg) {         var me = this;         cfg = cfg || {};         me.callparent([ext.apply({             storeid: 'tradedata',             autoload: false,             pagesize: 4,             model: 'myapp.model.ram.ramdatamodel',              proxy:{                  writer:{                       type:'json'                  },                  reader:{                       type:'json'                  },                   enablepaging: true             },              sorters: [{                 property: 'tradeid',                 direction: 'asc'             }]          }, cfg)]);     } }); 

model:

ext.define('myapp.model.ram.ramdatamodel', {      extend : 'ext.data.model',      fields : [{                     name:'tradeid',                     type:'int'                }, {                     name : 'tradebook',                     type : 'string'                }, {                     name : 'otherbook',                     type : 'string'                }, {                     name : 'tradedate',                     type : 'auto'                }, {                     name : 'tradeddate',                     type : 'auto'                }}); 

controller:

i wrote function call on button clicks, , got json result server:

 data = [{"tradeid":1,"tradingbook":"ram"},{"tradeid:2,"tradingbook":"testbook"}] //(etc) 

here controller code:

 var datastore = ext.create('myapp.store.ramdatastore',{       model:'myapp.model.ram.ramdatamodel',       data:ext.decode(result,true),       pagesize:4,       start:0,       limit:4,       enablepaging : true,       proxy:{            type:'memory',            reader:{type:'json'},            writer:{type:'json'},       },       listeners:{       beforeload:function(store,operation,eopts){            store.proxy.data.total=ext.decode(result,true).length;            //store.proxy.data=ext.decode(result,true);       }  },  });   ext.getcmp('tradedatagrid').getdockedcomponent('tradepage').bind(datastore);  ext.getcmp('tradedatagrid').getview().bindstore(datastore);  ext.getcmp('tradedatagrid').getview().loadmask.hide();   }  }); 

with code, can add data grid, can't add store paging tool bar.

please on this. if have examples, please suggest & follow.

thanks.

you specify store paging toolbar string means store manager assumes string storeid , tries find instance of it. cannot because store created later. also, store must same both grid , paging toolbar.

you have 2 options:

1. declare store in controller: stores:['ramdatastore']
2. create manually during grid initcomponent create paging toolbar , assign store it.