ExtJS 4 – Events

Helpful links:

The scenario:
Single page app, with a card layout.  Card One has multiple tabs.  Tabs can be closed and reopened (therefore the id’s and itemIds of the tab panel can be reused).  A modal dialog can update data that will make multiple tabs out-of-date.  Version 1 of indicating if a tab is out-of-date is to put a yellow bar across the top of each tab that says it’s is out-of-date and needs to be closed and reopened.  (It’s just Version 1, I hope to have time to make it smarter than that).  On a successful save in the dialog I want to notify all the tabs.  I’m not using the new Ext JS 4 MVC pattern yet.  Again, I hope to have time to do that….
Ext.define("MyApp.App", {
    launch: function () {
        MyApp.App = this;
        // Create an app-wide msg bus
        this.msgBus = new Ext.util.Observable();
        this.msgBus.addEvents({
            'usersUpdated':true
        });
    }
});

Then add listeners to the tabs for the event:

onCreateTab : function () {
    // Condensed code
    var tab = Ext.create('MyApp.MyTab', {
        // configs here
    });
    tabPanel.add(tab);
    // When the tab is rendered, add the listener
    tab.on('render', function () {
       // Important, use mon so that the listener is removed when the tab is closed
       tab.mon(MyApp.App.msgBus, 'usersUpdated', function() {
           this.onUsersUpdated();
       }, tab);
    }, tab);
    tab.show();
}
And finally, fire the event from the modal dialog

onSuccess : function (form, action) {
	// Need to update the rest of the UI to indicate it might be out of date
	MyApp.App.msgBus.fireEvent('usersUpdated');
	this.close();
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s