0

Ext4.1.0とExt4.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

これを処理する最も簡単な方法は、ウィンドウのイベントをリッスンし、ドキュメントで説明されているように、celleditorのメソッド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ソースコードの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 に答える