Help getting started with JsonReader and grid

[mcarsel]

Animal: xg.dummydata was some cruft left over from a grid example I'm mimicking. It was in an optional argument so I removed it and got a little bit farther.

Now the error is:

Error: this._windows[aWindow.__SSi] has no properties
Source File: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsSessionStore.js
Line: 777

[JoeK]

Just a hint, take one of the examples and replace a line in the example, then test it. Replace lines piece by piece and you will find out where you are going wrong.

This is excellent advice. Thanks.

[mcarsel]

Removed expander and restarted browser. That cleared up the last error.

Now getting no errors. The grid shows headers, but is empty.

This is the current code:

Ext.onReady(function(){

    Ext.QuickTips.init();
    
    var xg = Ext.grid;

    // shared reader
    var electronicDevice = Ext.data.Record.create([
       { name : 'id'}, { name : 'model'}, { name : 'deviceType'}, { name : 'netBandwidth'}
    ]);
    
    var reader = new Ext.data.JsonReader({
 	   root : "properties",
 	   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 Device',
	       method : 'GET'
	   })
	});

    var grid1 = new xg.GridPanel({
        ds: new Ext.data.Store({
            reader: reader
        }),
        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'}
        ]),
        viewConfig: {
            forceFit:true
        },
        width: 600,
        height: 300,
        collapsible: true,
        animCollapse: false,
        title: 'Electronic Devices',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

});

[JoeK]

I'm just one step ahead of you.

After you define your grid, try store.load(); (Though you'd think autoLoad would do that for you...that ended up being my problem.)

[cobnet]

Look here:

        ds: new Ext.data.Store({
            reader: reader
        }),

try this:

        ds: store

Your store may need a column model as well?

[mcarsel]

cobnet: OK, that helped! I also changed root: "properties" to root: "features". Now I'm getting 10 rows populated in the grid with ids only. Look back at my original post in this thread: "properties" is a nested object. Can the Ext JsonReader handle something like this?

[cobnet]

cobnet: OK, that helped! I also changed root: "properties" to root: "features". Now I'm getting 10 rows populated in the grid with ids only. Look back at my original post in this thread: "properties" is a nested object. Can the Ext JsonReader handle something like this?

Ok, I have gone as far as my knowledge will let me go on this one. I am sure the JsonReader can handle this, it is just a matter of letting the grid know what coming at it. I will keep looking at this, but my timeframe and yours may not be the same?

[mcarsel]

So the question is:

How do I populate the rest of the grid? Is the answer to modify the following code somehow?

var electronicDevice = Ext.data.Record.create([
{ name : 'id' }, { name : 'model' }, { name : 'deviceType' }, { name : 'netBandwidth' }
]);

[mcarsel]

I solved my own problem. Note the use of "properties." to address the nested elements. Thanks everyone who helped along the way.

Ext.onReady(function(){

    Ext.QuickTips.init();
    
    var xg = Ext.grid;

    var electronicDevice = Ext.data.Record.create([
       { name : 'id'}, { name : 'properties.model'}, { name : 'properties.deviceType'}, { name : '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: 'properties.model'},
        {header: "Device Type", width: 10, dataIndex: 'properties.deviceType'},
        {header: "Net Bandwidth", width: 10, dataIndex: 'properties.netBandwidth'}
        ]),
        viewConfig: {
            forceFit:true
        },
        width: 600,
        height: 300,
        collapsible: true,
        animCollapse: false,
        title: 'Electronic Devices',
        iconCls: 'icon-grid',
        renderTo: document.body
    });
    store.load();
});

[mjlecomte]

That's great that you figured it out. What probably would be helpful to others behind you is if you could point out (1) how you figured it out (firebug maybe? and if so how did you use it) and (2) if you understand what the mistake is now explain why it didn't work.
I think it's very useful learning from prior mistakes.
Plus, maybe now you've learned more and could offer back where the examples were insufficient. Presumably you could not make the example more 'sufficient'? Just a thought...