如何告诉PagingToolbar使用父网格存储？

Question

我正在尝试构建应用程序，它使用服务器传递的单个配置作为非本地JSON (可以包含函数)。到目前为止，一切都很好，但我很好奇为什么PagingToolbar没有选择使用父网格存储？

我曾试图像这样在配置中设置存储，但没有成功：

{...
   store:Ext.StoreMgr.lookup('unique_store_id')
}

有没有办法不为我的应用程序中定义存储、网格和其他项的每个视图编写大量的javascript，或者至少扩展使用父对象选项的PaginationToolbar功能？

更新后，以下是服务器响应的简短示例(小型化)

{
"xtype":"viewport",
"layout":"border",
"renderTo":Ext.getBody(),
"autoShow":true,
"id":"mainFrame",
"defaults":{"split":true,"useSplitTips":true},
"items":[
    {"region":"center",
    "xtype":"panel",
    "layout":"fit",
    "id":"content-area",
    "items":{
        "id":"manager-panel",
        "region":"center",
        "xtype":"tabpanel",
        "activeItem":0,
        "items":[
            {
                "xtype":"grid",
                "id":"domain-grid",
                "title":"Manage Domains",
                "store":{
                    "xtype":"arraystore",
                    "id":"domain-store",
                    "fields":[...],
                    "autoLoad":{"params":{"controller":"domain","view":"store"}},
                    "url":"index.php"
                },
                "tbar":[...],
                "bbar":{
                    "xtype":"paging",
                    "id":"domain-paging-toolbar",
                    "store":Ext.StoreMgr.lookup('domain-store')
                },
                "columns":[...],
                "selModel":new Ext.grid.RowSelectionModel({singleSelect:true}),
                "stripeRows":true,
                "height":350,
                "loadMask":true,
                "listeners":{
                    "cellclick":activateDisabledButtons
                }
            }
        ]
    },
}
]
}

Answer 1

另一种可能是创建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();

另一个选项是使用createInterceptor直接将上述行为应用于GridPanel：

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‘。

Answer 2

PagingToolbar之所以没有链接到其存储的网格，是因为PagingToolbar可以与任何支持分页的组件一起使用，而不仅仅是网格，所以您必须向它显式分配一个存储(也可以是其他组件使用的共享存储)。

不清楚为什么您的代码不能工作--我假设您的查找调用一定不会返回有效的存储引用。两个明显的可能性是id是错误的，或者商店还不存在。由于您没有发布任何其他代码，因此不可能在此之外进行说明。顺便说一句，您应该可以直接将网格使用的存储引用分配给工具栏，而不必进行查找，但我想这取决于应用程序的结构。

Answer 3

无论何时定义它，都会执行配置--通常是在实例化之前。因此，在网格构造函数发生Ext.StoreMgr.lookup('domain-store')之前，将发生。

这是ext js使用静态信任的一个缺点。您需要做的是要么重写网格，然后编程地设置工具栏的存储区，要么在网格上使用beforerender事件，如下所示：

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

编辑：将bbar更改为getBottomToolbar()。