Ext js Grid Пагинация

Я новичок в Ext JS и попробовал пример из документации Ext JS, но не могу разбить на страницы.

Я разработал свое приложение с использованием архитектуры MVC.

Вот мой код:

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'
      },
 ]

Здесь мой магазин панели инструментов пейджинга и мой магазин сетки одинаковы.

Магазин:

Я определил свой магазин с некоторыми свойствами по умолчанию и создал экземпляр для того же хранилища в контроллере для динамической привязки.

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)]);
    }
});

Модель:

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'
               }});

Контроллер:

Я написал функцию, которая будет вызываться при нажатии кнопки, и получил от сервера результат в формате JSON:

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

Вот мой код контроллера:

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

 }
 });

С помощью этого кода я могу добавлять данные в свою сетку, но не могу добавить хранилище на панель инструментов пейджинга.

Пожалуйста, помогите в этом. Если у вас есть какие-либо примеры, пожалуйста, предложите, и я буду следовать.

Спасибо.