Редактор не может исчезнуть после закрытия окна

У меня проблема на Ext 4.1.0 и Ext 4.1.1

Дважды щелкните первую ячейку, чтобы отредактировать ее, а затем нажмите кнопку закрытия окна, редактор все еще плавает на странице. Но это нормально для последней ячейки.

Кто-нибудь встречался с этой проблемой раньше? Спасибо

Ext.onReady(function(){

    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"1224" },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"1244" },
            { 'name': 'Marge', "email":"[email protected]", "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();

});

javascript editor window extjs floating
person Tony Zhu    schedule 06.11.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Самый простой способ справиться с этим для вас — прослушать событие окна beforeclose и отменить любое редактирование в этом событии с помощью метода cancelEdit редактора ячеек, как описано здесь в документации.

Например, вот ваш объект окна (из вашего кода выше) с примененным слушателем:

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

Ответить на комментарий:

Вот переопределение, которое сделает то же самое. Однако вам придется включать это переопределение в каждое приложение после инициализации ExtJS.

Конечно, также можно заменить функцию инициализации в исходном коде Ext.grid.plugin.Editor на эту (тогда вам не нужно было бы включать переопределение в приложение), но я бы не рекомендовал делать это по ряду причин.

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

    }
});

Я бы также рекомендовал изучить архитектуру MVC, это значительно облегчит вам работу с такими вещами.

person egerardus    schedule 06.11.2012
comment
Спасибо, вы правы. Однако я обнаружил эту проблему в разных продуктах моей компании, поэтому я хочу просто переопределить один метод Ext 4, чтобы исправить все продукты. - person Tony Zhu; 07.11.2012
comment
@TonyZhu Я включил пример того, как это сделать с переопределением. - person egerardus; 07.11.2012