0

我创建了几个可重用的 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 搜索能力让我失望了，我似乎找不到任何东西来获得我想要的东西。

4

4 回答 4

1

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

1) 在某种全局数组中维护您自己的这些对象的集合，然后在 initComponent 期间推送实例：

MyApp.myGrids.push(this);

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

Ext.ComponentMgr.all.each(function(c){
    // xtype or some other check, instanceof
    if (c.isXType('mytype')) {
    }
});
于 2012-11-19T07:35:53.130 回答
1

我们必须对我们的项目做类似的事情。我们需要网格来相互通信。当数据在一个中更新时，可能需要另一个网格来更新自身。我们通过在 extjs 应用程序中使用中介者模式来做到这一点。在这种情况下，我们将正在编辑的网格注册为某个事件的发送者，即编辑事件。然后，当添加新行时，中介发送消息，并且正在侦听该事件（编辑事件）的任何其他网格接收消息/事件并自行刷新。

您可以根据需要创建调解器。这是一个起点：

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

于 2012-11-28T12:51:41.833 回答
1

也许将面板扩展为具有一组网格。表单提交成功后，“每个”遍历存储数组并重新加载。您可以决定是否要存储网格 id（并进行查找）或存储本身的 ref。

当然，您必须事先知道哪些网格与表单面板相关联。换句话说，您必须有一些方法来跟踪哪些网格最初属于哪个面板。也许您可以在网格的后渲染中填充这个网格数组。

最终，您需要设计一种方法来存储对所有这些 cmp 的引用。我认为库中没有任何东西可以为您做到这一点。在最基本的层面上.. 在每个 cmp 的 afterrender 中填充有引用的某种数组至少会给你一些循环的东西。

于 2012-11-19T06:54:48.210 回答
0

你可以试试这个 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);
    }
});

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

于 2012-11-20T06:48:34.323 回答