Question

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

 }
 });

使用此代码，我可以将数据添加到网格中，但无法将商店添加到我的分页工具栏。

请帮助解决这个问题。如果您有任何示例，请建议＆amp;我会跟着。

感谢。

Answer 1

您将分页工具栏的商店指定为字符串，这意味着Store Manager假定该字符串是storeId并尝试查找它的实例。但它不能，因为商店可能是后来创建的。此外，网格和分页工具栏的商店必须相同。

您有两种选择：

在您的控制器中声明商店：stores:['RamDataStore']
在网格initComponent期间手动创建它，您还可以在其中创建分页工具栏并将商店分配给它。

Ext js Grid Pagination

1 个答案: