ExtJS如何告诉pagingtoolbar使用父网格存储?

另一种可能性是创建一个子类gridpanel。此子类的构造函数可以检查其给定的pagingtoolbar配置配置。如果存在,则实例化存储(如果需要),并将其引用到pagingtoolbar配置。

var MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function( cfg ) {
        if ( cfg && cfg.store && cfg.bbar && cfg.bbar.xtype == 'paging'
            && ! (cfg.bbar instanceof Ext.PagingToolbar && ! this.bbar.store
        ) {
            if ( cfg.store.xtype && ! (cfg.store instanceof Ext.data.Store) ) {
                cfg.store = Ext.ComponentMgr.create(cfg.store);
            }

            cfg.bbar.store = cfg.store;
        }   

        MyGridPanel.superclass.constructor.call(this, cfg);
    }   
});

示例用法:

(new Ext.Window({
    width: 400,
    height: 200,
    layout: 'fit',
    items: new MyGridPanel({
        store: {
            xtype: 'arraystore',
            fields: ['name', 'value'],
            data: [ 
                ['name 1', 'value 1'],
                ['name 2', 'value 2']
            ]   
        },  
        columns: [
            {
                dataIndex: 'name',
                header: 'Name'
            },  
            {
                dataIndex: 'value',
                header: 'Value'
            }   
        ],  
        bbar: {
            xtype: 'paging',
            pageSize: 25
        }
    })
})).show();

另一个选项是使用CreateSinterceptor将上述行为直接应用于网格面板:

Ext.grid.GridPanel.prototype.initComponent =
    Ext.grid.GridPanel.prototype.initComponent.createInterceptor(function() {
        if ( this.store && this.bbar && this.bbar.xtype == 'paging'
            && ! (this.bbar instanceof Ext.PagingToolbar) && ! this.bbar.store
        ) {
            if ( this.store.xtype && ! (this.store instanceof Ext.data.Store) ) {
                this.store = Ext.ComponentMgr.create(this.store);
            }   

            this.bbar.store = this.store;
        } 
    });

这将允许您继续使用xtype:'grid'。

pagingtoolbar未链接到其存储的网格的原因是pagingtoolbar可以与任何支持分页的组件一起使用,而不仅仅是网格,因此您必须显式地将存储分配给它(这可能是其他组件也使用的共享存储)。

不知道您的代码为什么不能正常工作——我假设您的查找调用不能返回有效的存储引用。两种明显的可能性是ID错误,或者商店还不存在。既然你没有发布任何其他代码,就不可能再告诉别人了。顺便说一句,您应该能够简单地将网格使用的商店引用直接分配到工具栏,而不必进行查找,但我想这取决于应用程序的结构。

每当您定义它时都会执行的配置——通常是在它被实例化之前执行的。所以 Ext.StoreMgr.lookup('domain-store') 将会发生 之前 网格构造函数发生。

这是ExtJS使用静态配置方式的一个缺点。您需要做的是重写网格,然后通过编程设置工具栏的存储,或者在网格上使用beforerender事件,如下所示:

//...grid config
listeners: {'beforerender' : {fn:function(){ this.getBottomToolbar().store = this.store }}}

编辑: 已将BBAR更改为GetBottomToolbar()。

实际上,在3.2.0版本中,listnere并没有为我工作(它填充了网格,但不允许我更改页面)。问题是,ext不知道它必须重建工具栏(正如您刚刚修改了一个变量)。固定波纹管:

listeners: {'beforerender' : {fn:function(){ this.getBottomToolbar().bindStore(this.store ) }}},