How can i get edited row value from Editable Grid in ExtJs? - 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 = " <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;
}