在頁面上引用ExtJS組件的所有實例

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

也許將面板擴展為具有網格陣列。 表單提交成功后，“遍歷”存儲陣列並重新加載。 您可以決定是否要存儲網格ID（並進行查找）或對存儲本身的引用。

當然，您必須事先知道將哪個網格綁定到表單面板。 換句話說，您必須有某種方式來跟蹤最初屬於哪個面板的網格。 也許您可以在網格的后期渲染中填充此網格數組。

最終，您需要設計一種方法來存儲對所有這些cmp的引用。 我認為lib中沒有任何可以為您完成此操作的東西。 在最基本的層次上，在每個cmp的后期渲染中都填充有引用的某種數組至少會給您帶來一些循環。

Answer 2

有兩種方法可以做到這一點：

1）在某種全局數組中維護您自己的這些對象的集合，然后在initComponent期間將實例推入：

MyApp.myGrids.push(this);

2）遍歷〜all〜組件，然后提取出想要的組件：

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

Answer 3

我們必須在我們的項目上做類似的事情。 我們需要網格相互通信。 一次更新數據時，可能需要另一個網格進行更新。 我們通過在extjs應用程序中使用調解器模式來做到這一點。 我們將正在編輯的網格注冊為某個事件的發送者，在這種情況下，為編輯事件。 然后，當添加新行時，調解器發送一條消息，而其他正在監聽該事件（編輯事件）的網格將接收到該消息/事件並刷新自身。

您可以隨時創建調解器。 這是一個起點：

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);
    }
});

這是一種非常粗略的方法，但是我希望它可以幫助您說明整個想法。