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');
	// now do what is needed for save

Ext JS Version: 4.0.7


One comment

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