events

Ext JS 4 – Cell Editing and Blur Event

I have a grid panel using the cell editing plugin. There is also a Save button on panel top toolbar. When editing a field in the grid and then clicking the save button without tabbing out of the field being edited the blur event of the cell occurred after the Save button handler. It happened consistently in IE8.

I found this very helpful post EditorGridPanel -delay in firing Blur Event causes Bug on the Sencha forums and utilized the same solution, with a slight update for Ext 4. I called plugin.completeEdit() at the beginning of my save handler.

Plugin declaration:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
	pluginId: 'cellplugin',
	clicksToEdit: 1,
	listeners : {
		scope: this,
		// put listeners here
	}
});

At the beginning of the save button handler:

onSave : function () {
	var grid = this.child('#divGrid'), plugin;

	plugin = grid.getPlugin('cellplugin');
	plugin.completeEdit();
	
	// now do what is needed for save
}

Ext JS Version: 4.0.7

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