Extjs Grid Edit Plugin - Textfield focus not removed when resizing parent modal window

Question

When setting clicksToEdit : 2 option to edit a cell using grid edit plugin, the textfield sets focus properly. When dragging or resizing the modal window the textfield needs to remove the focus.

The issue is that the textfield is not blurred.

Here's a screenshot of the issue:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 2
    })
],

I have attached the code in JSFiddle.

Steps to reproduce the issue:

double click to edit the name.
resize the panel from right bottom.Now the textbox have a focus and position of textbox is changed.

Alexander Alexander · Accepted Answer · 2016-04-18T07:04:43

As far as I can see from your code, this has to be an unfixed issue with ExtJS 4.2.x. I am not sure about ExtJS 4.2.4 and 4.2.5, but as of 4.2.3 the bug is still there.

The "funny" thing about this is that the datepickerfield editor does it correctly. Possibly you can look at the code of datepickerfield and make an override for textfield based on that.

In newer versions of ExtJS (5.1 and 6.0), the problem does no longer show.

You could ask for workaround availability in the Sencha forums.

EDIT: A valid workaround would be to add to your cellediting plugin:

pluginId: 'editing'

and to your panel:

listeners:{
    resize:function(panel) {
        var plugin = panel.down('grid').getPlugin('editing');
        if(plugin.editing) plugin.cancelEdit();
    }
}

Extjs Grid Edit Plugin - Textfield focus not removed when resizing parent modal window

1 Answers