Question

我创建了几个可重用的ExtJS组件，类似于以下内容：

MyCustomGridPanel = Ext.extend(Ext.form.GridPanel, {
    constructor: function(config) {
        config = Ext.apply({
            // some other default options
        }, config);

        MyCustomFormPanel.superclass.constructor.call(this, config);
    }
});

然后，我可以在需要它的页面中包含此自定义网格面板。在某些情况下，我会在页面上多次使用相同的网格面板。

我正在尝试解决的问题是我有表单面板，我想自动更新任何包含与自动刷新的表单面板相关数据的网格面板。

如果页面上有单个网格面板，则在成功提交表单面板后，我可以致电Ext.getCmp('the_id_of_the_grid_panel').getStore().reload()。但是对于这些网格面板的多个实例，我想做类似但不使用ID的东西，因为ID必须是唯一的。我想在页面上获得一个具有某种标识符的所有网格面板的数组，并调用<item>.getStore().reload()。

我的Google搜索和Stack Overflow搜索功能让我失望，我似乎无法找到任何东西来获取我正在寻找的东西。

Answer 1

也许扩展面板以获得一组网格。表单提交成功后，＆＃34;每个＆＃34;在商店阵列和重新加载。您可以决定是否要将网格ID（并进行查找）或ref存储到商店本身。

当然，您必须知道哪些网格预先绑定到表单面板。换句话说，您必须有一些方法来跟踪哪个网格最初属于哪个面板。也许你可以在网格的后期填充中填充这个网格数组。

最终，您需要设计一种方法来存储对所有这些cmp的引用。我不认为lib中有任何东西能为你做这件事。在最基本的层面上......在每个cmp的后整数中填充了引用的某种数组，至少会给你一些循环。

Answer 2

有两种方法可以做到这一点：

1）在某种全局数组中维护这些对象的集合，然后在initComponent期间打开实例：

MyApp.myGrids.push(this);

2）迭代〜所有〜组件然后提取出你想要的组件：

Ext.ComponentMgr.all.each(function(c){
    // xtype or some other check, instanceof
    if (c.isXType('mytype')) {
    }
});

Answer 3

我们必须在我们的项目上做类似的事情。我们需要网格来相互沟通。当数据更新为一个时，可能需要另一个网格来更新自身。我们通过在extjs应用程序中使用mediator模式来完成此操作。我们将编辑的网格注册为特定事件的发送者，在这种情况下是编辑事件。然后，当添加新行时，调解器发送消息，并且正在侦听该事件的任何其他网格（编辑事件）接收消息/事件并自行刷新。

您可以随意创建调解员。这是一个起点：

http://www.fancybread.com/blog/post.cfm/mediator-pattern-applied-to-javascript

Answer 4

您可以尝试使用ExtJS v3：

var gridPanels = [];
gridPanels.push(new MyCustomGridPanel(opts));    

...

Ext.each(gridPanels, function (gp) {
    gp.getStore().reload();
});

如果您计划为每个网格面板指定一个名称，则可以使用ref属性或将其指定给命名对象并迭代它。

MyMainPanel = Ext.extend(Ext.Panel, {
    gpNames: ['FirstName', 'Gender'],
    constructor: function(config) {
        config = Ext.apply({
            items: [{
                //make sure you create an xtype for your class
                xtype: 'MyCustomGridPanel',
                ref: 'gp'+gpNames[0]
            }, {
                xtype: 'MyCustomGridPanel',
                ref: 'gp'+gpNames[1]
            }]
        }, config);

        MyMainPanel.superclass.constructor.call(this, config);

        Ext.each(gpNames, function (gpName) {
            this['gp' + gpName].getStore().reload();
        }, this);
    }
});

这是一种非常粗暴的做法，但我希望它有助于说明这个想法。

引用页面上ExtJS组件的所有实例

4 个答案: