PDA

View Full Version : EditorGrid and Record Field value as object



amatai
19 Mar 2010, 2:26 PM
I am using ExtJS 3.1 and want to use EditorGrid. Consider my JsonStore is created from this array



var data = {
root: [{name: "eth0",
ip_mask: {ip: '10.1.1.1', mask: 24, internalRepresentattion:"eth0:mask"}
}, {
name: "eth1",
ip_mask: {ip: '10.1.1.1', mask: 24, internalRepresentattion:"eth1:mask"}
} ...
]
}

var store = new Ext.data.JsonStore({
storeId: 'interfaces',
autoSave: true,
root: 'root',
fields: [
{name: 'name'},
{name: 'ip_mask'}
]
});

store.loadData(data);

var cm = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer({header: 'No.'}),
{id:'name',header:'Interface',dataIndex:'name'},
{header: 'IPAddress/Mask', dataIndex:"ip_mask", editable: true,
renderer:ipRenderer,
editor: new Ext.form.TextField({}) },
],
defaults: {
sortable: true,
align: 'center'
}
});

// The editor-grid itself
var gridP = new Ext.grid.EditorGridPanel({
title: 'Interfaces',
height: 350,
width: 500,
clicksToEdit: 1,
stripeRows: true,
loadMask: true,
store: store,
cm: cm,
viewConfig: {
forceFit: true
}
});

// The renderer function
function ipRenderer(val) {
return val.ip + "/" + val.mask;
}

With the above the field "ip_mask" in each record in the store is an object. The reason, I did this was when the IP address is modified, I wanted the store to post back all the properties of ip_mask field not just IP address which I display on the EditorGrid.

Display is all good.

Problem is, when I click on the IP address field, the textEditor show "[object Object]"; which I think, I understand why it is doing so.

Questions are:
1. How can I make the editor to continue to display the IP address/mask format ?
2. And when the update is complete actually update the ip_mask.ip and ip_mask.mask field ?

Do I have to write my custom update method? Under which class would that be and which event would be fired when the update is done ?

Any help/insight would be highly appreciated!
Thanks.