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

我创建了几个可重用的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（'u网格面板的\u id'）.getStore（）.reload（）

。但是对于这些网格面板的多个实例，我想做一些类似的事情，但不使用ID，因为ID必须是唯一的。我想获得页面上所有网格面板的数组，其中包含某种标识符，并调用

.getStore（）.reload（）

---

我的谷歌搜索和堆栈溢出搜索功能让我失望，我似乎找不到任何东西来获得我要找的东西。

也许可以扩展面板以拥有一个网格阵列。表单提交成功后，在存储阵列上“每个”并重新加载。您可以决定是存储网格id（并进行查找）还是存储本身的引用

当然，您必须事先知道哪些网格绑定到表单面板。换句话说，您必须有某种方法来跟踪哪些轴网最初属于哪个面板。也许可以在网格的后渲染中填充此网格阵列

---

最终，您需要设计一种方法来存储对所有这些cmp的引用。我不认为图书馆里有什么东西能帮你做到这一点。在最基本的层面上。。在每个cmp的afterrender中填充一个引用的某种数组至少会给您一些循环的内容

也许可以扩展面板，使其具有网格阵列。表单提交成功后，在存储阵列上“每个”并重新加载。您可以决定是存储网格id（并进行查找）还是存储本身的引用

当然，您必须事先知道哪些网格绑定到表单面板。换句话说，您必须有某种方法来跟踪哪些轴网最初属于哪个面板。也许可以在网格的后渲染中填充此网格阵列

---

最终，您需要设计一种方法来存储对所有这些cmp的引用。我不认为图书馆里有什么东西能帮你做到这一点。在最基本的层面上。。在每个cmp的afterrender中填充一个引用的某种数组至少会给您一些循环的内容

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

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

MyApp.myGrids.push(this);

2） 迭代~all~组件，然后提取出所需的组件：

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

---

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

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

MyApp.myGrids.push(this);

2） 迭代~all~组件，然后提取出所需的组件：

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

---

您可以在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 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应用程序中使用中介模式来实现这一点。我们将正在编辑的网格注册为某个事件的发送者，在本例中为编辑事件。然后，当添加新行时，中介器将发送一条消息，正在侦听该事件（编辑事件）的任何其他网格将接收该消息/事件并刷新自身

您可以按照自己的意愿创建中介。这是一个起点：

---

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

您可以按照自己的意愿创建中介。这是一个起点：

---

我想我可能不得不采取保留全局阵列的方式。我希望对这些网格的更新进行抽象，这样当我的团队中的其他人需要使用这些组件时，他们所要担心的就是包括表单，表单将自动处理网格的更新，通过在页面上自己查找任何网格。我想我可能不得不采取保留全局数组的方式。我希望抽象这些网格的更新，这样当我的团队中的其他人需要使用这些组件时，他们所要担心的就是包括表单，表单将自动处理网格的更新，通过在页面上自己查找任何网格。