Question

我在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":"lisa@simpsons.com",  "phone":"1224" },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"1244" },
            { 'name': 'Marge', "email":"marge@simpsons.com", "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

为您处理此问题的最简单方法是收听窗口的beforeclose事件，并使用celleditor的cancelEdit方法取消此事件中的任何编辑，如here中所述文档。

例如，这是您的窗口对象（来自上面的代码），应用了侦听器：

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源代码中的init函数替换为此函数（然后你不必在应用程序中包含覆盖）但我不建议这样做有很多原因。

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架构，它会让你更容易处理这样的事情。

关闭Window后，编辑器无法消失

1 个答案: