Extjs getting modified value from textbox rendered inside gridpanel - extjs

Question

I'm trying to get value inserted from the interface in a text box rendered inside a GridPanel extjs 3.4, below how is defined the textbox inside the column model:
header: "Rosso",
dataIndex: "contrFilEsRosso",
width: 50,
renderer: function(val, meta,record){
var str0='<p align="left"><input type="text" name="verde" value="' + val + '
return str0;
}
I've modified from the interface the value inside the textbox and i want to send the modified value to the controller. Obviously the store has the value extracted from the backend and is not updated with the new value, so i tried the getView() method of the GridPanel but i haven't been able to get the new value of the textbox.
Thanks a lot.

Answer 1

Any data loaded into an ExtJs grid will be kept in a store, along with the edits.
There are a number of ways you can get the specific value but usually you will just want to send the data back to the server to update as needed.
You can access the store via the getStore() method on the grid and from there you can access any individual records by id or index.
Yo would be best using an EditorGrid and listening to events such as afterEdit
Something like this should work (might need some tweaking, not tested as on mobile)
Fiddle
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
Ext.create("Ext.grid.EditorGridPanel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
isCellEditable: function(col, row) {
return (col == 0);
},
listeners: {
afterEdit: function(e) {
alert("You changed " + e.field + " from " + e.originalValue + " to " + e.value);
}
},
height: 200,
width: 400,
});
}
});