OK, You've done well so far, but it's not advisable to use dots in field names (and the therefor the ColumnModel dataIndex properties that reference them) because the dataIndex is used as a javascript property name, and dots are significant - there's another thread posted today where someone got bitten just just this: http://extjs.com/forum/showthread.php?t=17046
What you need to do is define a mapping in field definition configs for the fields that are pulled from within an inner property.
Code:
var electronicDevice = Ext.data.Record.create([
{ name : 'id'}, // property name within the row object is the same as the field name
{ name : 'model', mapping: 'properties.model'}, // mapping needed here because name != mapping
{ name : 'deviceType', mapping: 'properties.deviceType'},
{ name : 'netBandWidth', mapping: 'properties.netBandwidth'}
]);
var reader = new Ext.data.JsonReader({
root : "features",
totalProperty : "total",
id : "id"
}, electronicDevice);
var store = new Ext.data.Store({
nocache : true,
reader : reader,
autoLoad : true,
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : '/getjson?queryable=featureType&featureType=Electronic%20Device',
method : 'GET'
})
});
var grid1 = new xg.GridPanel({
ds: store,
cm: new xg.ColumnModel([
{id : 'id', header : "Feature Number", width: 8, dataIndex : 'id'},
{header: "Model", width: 10, dataIndex: 'model'},
{header: "Device Type", width: 10, dataIndex: 'deviceType'},
{header: "Net Bandwidth", width: 10, dataIndex: 'netBandwidth'}
...
The documentation for Ext.data.record.create explains this.