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

Then add listeners to the tabs for the event:

onCreateTab : function () {
    // Condensed code
    var tab = Ext.create('MyApp.MyTab', {
        // configs here
    // 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() {
       }, tab);
    }, tab);
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

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s