Question

我正在尝试构建使用服务器传递的单个配置作为非本机 JSON （可以包含函数）的应用程序。到目前为止一切正常但我很好奇为什么 PagingToolbar 没有使用父网格商店的选项？

我试图在我的配置中设置商店，但没有成功：

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

如果没有为我的应用程序中定义商店，网格和其他项目的每个视图写入大量的javascript，或者至少扩展使用父对象中的选项的 PaginationToolbar 的功能，有没有办法这样做？ / p>

更新以下是服务器响应（缩小）的简短示例

{
"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

PagingToolbar未与其商店的网格链接的原因是PagingToolbar可以与支持分页的任何组件一起使用，而不仅仅是网格，因此您必须明确地为其分配商店（可以是共享存储其他组件也使用）。

不确定为什么你的代码不起作用 - 我认为你的查询调用不能返回有效的商店引用。两个明显的可能性是id是错误的，或者商店还不存在。既然你没有发布任何其他代码，那么除此之外是不可能的。顺便说一句，你应该能够简单地将网格使用的商店参考直接分配给工具栏，而不必进行查找，但我想这取决于你的应用程序的结构。

Answer 2

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

这是ext js使用静态配置的方式的一个缺点。你需要做的是覆盖网格，然后以编程方式设置工具栏的商店或者在网格上使用beforerender事件，如下所示：

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

编辑：将bbar更改为getBottomToolbar（）。

Answer 3

另一种可能性是创建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 4

实际上在3.2.0上，listnere对我没有用（它填充了网格，但它不允许我更改页面）。问题是ext不知道它必须重建工具栏（因为你刚刚修改了一个变量）。如下：

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

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

4 个答案: