Question

I got a problem on Ext 4.1.0 and Ext 4.1.1

Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.

Anyone met this problem before? Thanks

Ext.onReady(function(){

    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[e-mail]",  "phone":"1224" },
            { 'name': 'Bart',  "email":"[e-mail]",  "phone":"1234" },
            { 'name': 'Homer', "email":"[e-mail]",  "phone":"1244" },
            { 'name': 'Marge', "email":"[e-mail]", "phone":"1254" }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var table = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { 
                text: 'Name',  
                dataIndex: 'name',
                editor: { xtype: 'textfield', toFrontOnShow: false } 
            },
            { 
                text: 'Email', 
                dataIndex: 'email', 
                flex: 1 
            },
            { 
                text: 'Phone', 
                dataIndex: 'phone',
                editor: { 
                    xtype: 'numberfield', 
                    hideTrigger: true, 
                    validateOnChange : false
                } 
            }
        ],
        height: 200,
        width: 400,
        plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 2
        })]
    });

    var window = new Ext.Window({
        id: 'abc',
        title :'abc',
        modal : true,
        layout: 'border',
        resizable : true,
        draggable : true,
        closable : true,
        closeAction : 'hide',
        width :410,
        height :210,
        items : [table]
      });

    window.show();

});

Answer 1

The easiest way to handle this for you, would be to listen to the window’s beforeclose event and cancel any editing in this event using the celleditor’s cancelEdit method as described here in the docs.

For example, here is your window object (from your code above) with the listener applied:

var window = new Ext.Window({
    id: 'abc',
    title :'abc',
    modal : true,
    layout: 'border',
    resizable : true,
    draggable : true,
    closable : true,
    closeAction : 'hide',
    width :410,
    height :210,
    items : [ table],
    // add this listener to your window
    listeners: {
        beforeclose: function(panel) {
            var view = panel.down('gridview');

            if (view && view.editingPlugin) {
                view.editingPlugin.cancelEdit();
            }
        }
    }
});

Reply to comment:

Here’s an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.

Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn’t have to include the override in the app) but I wouldn’t recommend doing that for a number of reasons.

Ext.override(Ext.grid.plugin.Editor, {
    init: function(grid) {

        // the normal init code (below) must be included in the override
        var me = this;
        me.grid = grid;
        me.view = grid.view;
        me.initEvents();
        me.mon(grid, 'reconfigure', me.onReconfigure, me);
        me.onReconfigure();
        grid.relayEvents(me, [
            'beforeedit',
            'edit',
            'validateedit',
            'canceledit'
        ]);
        grid.isEditable = true;
        grid.editingPlugin = grid.view.editingPlugin = me;

        // additional code to cancel editing before a grid is hidden
        grid.on('beforehide', function(grid) {
            var view = grid.view;

            if (view && view.editingPlugin) {
                view.editingPlugin.cancelEdit();
            }
        });

        // additional code to cancel editing before a grid is destroyed
        grid.on('beforedestroy', function(grid) {
            var view = grid.view;

            if (view && view.editingPlugin) {
                view.editingPlugin.cancelEdit();
            }
        });

    }
});

I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.