0

我在 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();

});
4

1 回答 1

1

为您处理此问题的最简单方法是侦听窗口的事件并使用文档中所述的beforeclosecelleditorcancelEdit方法取消此事件中的任何编辑。

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

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

于 2012-11-06T03:12:09.017 回答