Search code examples
javascriptextjsextjs3

Reference all instances of ExtJS component on a page

I have created several reusable ExtJS components, similar to the following:

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

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

I am then able to include this custom grid panel in pages where I need it. In some cases I will have this same grid panel on a page multiple times.

The problem that I'm trying to solve is that I have form panels that I would like to automatically update any grid panel that contains data related to the form panel refreshed automatically.

In the case of a single grid panel on the page, upon the successful submission of a form panel I am able to call Ext.getCmp('the_id_of_the_grid_panel').getStore().reload(). But with multiple instances of these grid panels, I'd like do something similar but without using an ID since an ID has to be unique. I'd like to get an array of all grid panels on the page with an identifier of some sort and call <item>.getStore().reload().

My Google search and Stack Overflow search abilities have failed me and I can't seem to find anything to get me what I'm looking for.

Solution

  • We have to do something similar on our project. We need grids to communicate with each other. When data is updated in one it may require another grid to update itself. We do this by using the mediator pattern within our extjs application. We register our grid that's being edited as a sender of a certain event in this case the edit event. Then when a new row is added the mediator send a message and any other grids that are listening for that event (the edit event) receive the message/event and refresh themselves.

    You can create a mediator anyway you wish. here's a starting point:

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