Ext js Grid Pagination

Question

I am new to Ext JS and I have tried the Example from the Ext JS docs, but I am unable to get pagination.

I have designed my application using MVC architecture.

Here is my 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 to 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 my paging tool bar store and my grid store are the same.

Store:

I defined my store with some default properties and I created an instance for the same store in the controller to 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 a function that will call on button clicks, and I got a JSON result from the server:

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

Here is my 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 this code, I can add data to my grid, but can't add store to my paging tool bar.

Please help on this. If you have any examples, please suggest & I will follow.

Thanks.

Hi Ram, don't forget that you should not indent the non-code lines of your post. This will make your question much easier to read and answer :) — Barett

Saki Saki · Accepted Answer · 2014-06-26T10:55:00

You specify the store for paging toolbar as string what means that Store Manager assumes the string is storeId and tries to find the instance of it. But it cannot because the store is probably created later. Also, the store must be same for both the grid and paging toolbar.

You have two options:

declare the store in your controller: stores:['RamDataStore']
create it manually during grid initComponent where you would also create the paging toolbar and assign the store to it.

Ext js Grid Pagination

1 Answers