extjs - Extjs Grid - 回调存储变量到分页工具栏

Question

我在网格面板的“initComponent”中初始化存储变量，例如

    initComponent: function() {
        var store = Ext.create('Ext.data.Store', {
            model: 'MyDataObject',
            pageSize:_end,
            proxy: {
                 type: 'ajax',
                 url: myurl,
                 reader: {
                    type: 'json',
                    totalProperty: 'total', // total data, see json output
                    root: 'results'    // see json output                   
                 }
             }
        });
        this.store = store;
        this.callParent(arguments);
        this.store.load({params:{start:_star, limit:_end}
    });

我在 pagingtoolbar 中调用 store 就像

dockedItems: [
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: this.store,
            pageSize: _end,
            displayInfo: true,
            displayMsg: 'Displaying results {0} - {1} of {2}',
            emptyMsg: 'No results'
        }
]

在我的网格面板中仍然有数据，但我的底部显示“没有结果”，例如

我认为问题是store: this.store, . 我怎样才能使它工作谢谢。

Answer 1

您可以像这样定义商店

Ext.define('MyApp.store.MyDataStore', {
        extend: 'Ext.data.Store',
        model: 'MyDataObject',
        storeId: 'myStoreId',
        pageSize:_end,
        proxy: {
             type: 'ajax',
             url: myurl,
             reader: {
                type: 'json',
                totalProperty: 'total', // total data, see json output
                root: 'results'    // see json output                   
             }
         }
    });

然后将 myStoreId 分配给网格面板和分页工具栏的商店配置，并且框架（StoreManager）应该创建一个分配给两者的商店。

然后，您可以在您的商店中设置 autoload=true 或在网格的 initComponent 中创建一个新商店，然后手动进行加载。

Answer 2

昨天遇到这个奇怪的问题，在修复这个问题之前，我猜是grid和pagingbar的stores的状态不是同步的，我用Firebug调试了很久，也就是说stores不是同一个，他们只是一个商店的同一个实例，所以你可以通过两种方式解决这个问题，第一种是创建一个商店的全局变量，他们可以共享它第二种是使用 bindStore 方法。例如支持你有网格扩展喜欢下面

this.on('afterrender',function(){//this  is grid itself
        this.getBottomToolbar().bindStore(this.store)//set store of paggingtoolbar
    },this);

Answer 3

我在 extjs 中的远程分页网格中找到了解决方案， 代码必须像：

        this.store = store;
        this.dockedItems = [{
           xtype: 'pagingtoolbar',
           store: this.store,
           displayMsg: 'Displaying results {0} - {1} of {2}',
           emptyMsg: 'No results',
           dock: 'bottom',
           displayInfo: true,
           pageSize: 22
        }];

        this.callParent(arguments);
        this.store.load({params:{start:0, limit:22}});