How can i get edited row value from Editable Grid in ExtJs?

Question

I've a HTML page with ExtJs editable grid. Edit is working fine, but i want to get Id field value of the edited row, but can't figured it out... i want to populate another array of values with Id, Name and Email field values of edited ROW...

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

# #

Thanks @Hariharan and @Dipti for your valuable help... the working code is-

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

Please refer below answer, i hope it will help you.

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

Answer 2

check this, you have gridPanel with three columns , using sm you can select values of editables, after save you can call fnctChange function and use the new values. hope this will help you.

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

function 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;

}