如何从 ExtJs 中的可编辑网格中获取已编辑的行值？

Question

我有一个带有 ExtJs 可编辑网格的 HTML 页面。编辑工作正常，但我想获取已编辑行的 Id 字段值，但无法弄清楚...我想用已编辑行的 Id、名称和电子邮件字段值填充另一个值数组...

Ext.onReady(function() {
Ext.create('Ext.data.Store', {
    storeId:'myArray',
    fields:['id','name', 'email'],
    data:{'items':[
        {"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
        {"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
        {"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
        {"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayData',
    store: Ext.data.StoreManager.lookup('myArray'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
            scope: this,
            edit: function (theEditor, e, eOpts)
        {
            console.log();
        }
    }
        })
    ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});
});

# #

感谢@Hariharan 和@Dipti 提供的宝贵帮助...工作代码是-

Ext.create('Ext.data.Store', {
    storeId:'myArray',
    fields:['id','name', 'email'],
    data:{'items':[
        {"id":"1", "name":"Lisa", "email":"lisa@ArrayData.com"},
        {"id":"2", "name":"Bart", "email":"bart@ArrayData.com"},
        {"id":"3", "name":"Homer", "email":"home@ArrayData.com"},
        {"id":"4", "name":"Marge", "email":"marge@ArrayData.com"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var array_edited=Ext.create('Ext.data.Store', {
    storeId:'myArray_edited',
    fields:['id','name', 'email'],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayData',
    store: Ext.data.StoreManager.lookup('myArray'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
            scope: this,
            edit: function(editor, e) {
                    array_edited.add({
                    id: e.record.get('id'),
                    name: e.record.get('name'),
                    email: e.record.get('email')
                    });
                }
    }
        })
    ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {
    title: 'ArrayDataEdited',
    store: Ext.data.StoreManager.lookup('myArray_edited'),
    columns: [
        {header: 'Id',  dataIndex: 'id'},
        {header: 'Name',  dataIndex: 'name'},
        {header: 'Email', dataIndex: 'email', flex:1
        }
    ],
    selType: 'cellmodel',

    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});

Answer 1

请参考下面的回答，希望对你有帮助。

plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners : {
                edit : function(editor, e) {
                    alert("Edited id value : " + e.record.get('id'));
                }
            }
        })
    ],

Answer 2

检查一下，你有三列的gridPanel，使用sm你可以选择可编辑的值，保存后你可以调用fnctChange函数并使用新值。 希望这会对你有所帮助。

var gridPanel = new Ext.grid.GridPanel({

    region : 'west',
    width : 360,
    height : 250,
    trackMouseOver : false,
    disableSelection : true,
    autoscroll : true,
    loadMask : true,
    margins : '3 3 3 0',
    sm : sm,
    viewConfig : {
        forceFit : true
    },
    store : store,
    // grid columns
    columns : [ sm, {
        id : 'columnNames',
        header : "<b>Select the column names to be displayed</b>",
        dataIndex : 'columnNames',
        renderer : renderColumnNames,
        width : 360,
        sortable : true
    }, { id : 'col1ID',
        header : "",
        dataIndex : 'Col1',
        hidden : true,
        sortable : true
    }, {
        id : 'col2ID',
        header : "",
        dataIndex : 'Col2',
        hidden : true,
        sortable : true
    }]
});
var settingPanelMsg = "&nbsp;&nbsp;<b>Change save</b><br></br>"
var settingPanel = new Ext.Panel({
    region : 'center',
    width : 390,
    height : 250,
    margins : '3 0 3 3',
    collapsible : true,
    html : settingPanelMsg
})

winSetting = new Ext.Window({
    title : 'Customize Your chnage',
    layout : 'border',
    closable : false,
    height : 300,
    width : 730,

    items : [ gridPanel, settingPanel ],
    buttons : [ {
        text : 'Close',
        handler : function(e, target, panel) {
            winLibSetting.close();
        }
    }, {
        text : 'Save',
        handler : function() {
            if (fnctChange() == true) {
                winLibSetting.close();
            }
        }
    } ]
});

winLibSetting.show();

函数 fnctChange() {

var L1 = sm.getSelections();

for (i = 0; i < L1.length; i++) {

var col1value = L1[i].data.col1ID;

    if (L1[i].data.col2ID == true) {
        var colName= L1[i].data.columnNames;
  Ext.MessageBox.alert(' ',
            'colName :'+colName);
    }
}

return true;

}