Help getting started with JsonReader and grid

[mcarsel]

I hope to get some help building an editable grid using a JsonReader. I'm new to Extjs and need a little help getting started.

Here is a sample of some json data that will be coming from the server:

{"features": [{"geometry":
{"type": "Point", "coordinates": [[-104.848006368, 39.6743902406]]}, "id": 270, "properties": {"featureType": "Electronic Device", "custBandwidth": "5 Mb", "deviceType": "Mid Size Switch", "netBandwidth": "1 GigE", "strokeColor": "magenta", "model": "CIsco 3750 Catalyst"}}, {"geometry":
{"type": "Point", "coordinates": [[-104.842658043, 39.6801250613]]}, "id": 269, "properties": {"featureType": "Electronic Device", "custBandwidth": "5 Mb", "deviceType": "Mid Size Switch", "netBandwidth": "1 GigE", "strokeColor": "magenta", "model": "CIsco 3750 Catalyst"}}, {"geometry":
{"type": "Point", "coordinates": [[-104.793954258, 39.6275587085]]}, "id": 1, "properties": {"featureType": "Electronic Device", "model": "Cisco 6509 Catalyst", "deviceType": "MOE Switch", "strokeColor": "magenta", "netBandwidth": "10 GigE"}}]}

I'd like to build an editable grid from this data using 'id' and selected 'properties' elements: 'featureType', 'deviceType', 'model', and 'netbandwidth'.

Could someone provide a sample editable grid with this data using JsonReader? Thanks.

[tryanDLS]

Read the grid tutorials http://extjs.com/learn. Play with the grid examples. Understand how the JSON structure maps to the ColumnModel. Modify the example ColumnModel to match your data. You need to understand the components in order to apply your requirements. Nobody is going to just write an example for you.

[mcarsel]

Been there, done that. The examples are insufficient, that's why I'm here.

[tryanDLS]

So you can't even post the code you attempted, so that somebody might be able to look at it and tell you what's wrong?

[mcarsel]

OK. Here's the code. The error in Firebug is "this.data has no properties" line 43 ext-all.js.

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%20Device',
	       method : 'GET'
	   })
	});

   
    // row expander
    var expander = new xg.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Device:</b> {device}<br>',
            '<p><b>Summary:</b> {desc}</p>'
        )
    });

    var grid1 = new xg.GridPanel({
        ds: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
        expander,
        {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,
        plugins: expander,
        collapsible: true,
        animCollapse: false,
        title: 'Expander Rows, Collapse and Force Fit',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

});

[Animal]

The examples are really not insufficient. There are eight examples in the examples/grid directory. What do you need?

And have you done what a programmer does, and debugged?

Use ext-all-debug.js because it is not compressed.

Then use Firebug's "Break on all errors" option to break when that error happens.

You can then follow the stack back to the user code that kicked the erroneous call off.

Debugging is needed in Javascript just the same as Java, C++, C# or whatever.

Do you read error messages in those other languages, and just give up?

[Animal]

BTW, what does xg.dummyData refer to? undefined? As in doesn't have any properties?

[mcarsel]

Please, I'm just asking for some assistance. When I say insufficient, I mean insufficient from my point of view as someone new trying to learn the toolkit. I'm impressed by the work being done here. For the most part, your examples are excellent. It seems to me that asking for a short 1 page example was not a big request. But if you think so, please forgive me.

[JoeK]

For a newbie, unless you're trying to do exactly what the examples are trying to do, they are only enough to nudge you in the right direction. They are fantastic examples, it's just sometimes hard to put the pieces together unless you are familiar with how ExtJS works in general. For a newbie, this can be very overwhelming.

Which is why it always bothers me when people won't provide help to those who need it. You were all mcarsel once. Why not lend a hand?

I totally agree that you shouldn't write the code, but it wouldn't hurt to nudge in the right direction, would it?

I think we all want ExtJS to be a huge success. For that to happen, those that know are going to have to be more willing to provide help to those who don't know. Especially if you have "Ext Support Team" next to your name. Abusive behavior will only turn people away, and none of us want that, do we?

That said, support here is generally really good, and very much appeciated. I just wish it was less like pulling teeth. (Maybe that's what the support subscriptions are for ;-) )

mcarsel, I'm trying to solve the same problem. If I figure it out, I'll be happy to help you.

[cobnet]

...
I think we all want ExtJS to be a huge success. For that to happen, those that know are going to have to be more willing to provide help to those who don't know. Especially if you have "Ext Support Team" next to your name. Abusive behavior will only turn people away, and none of us want that, do we?

That said, support here is generally really good, and very much appeciated. I just wish it was less like pulling teeth. (Maybe that's what the support subscriptions are for ;-) )

mcarsel, I'm trying to solve the same problem. If I figure it out, I'll be happy to help you.

ExtJS is already a huge success and will probably be the start of a much better open source community!

RE: Abusive behavior, hey I don't think anything said was abusive other than trying to nudge someone to look into the problem a little more before they post a query. If you wanna learn something take a little time to see what your doing and where it is going wrong.
Besides, he did give you a clue to where to look at in the coding.

I can see lots of things wrong with the posted coding and I am just learning the framework myself. 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. It took me several times to figure this one out. Check out the error msg, see if you can fix, if not then post a query with as much detail as possible. These guys definitely like the queries I am sure, this is BETA, and they want to make sure they have covered all bugs before going final, I think next week?

Some of these guys are replying to 100's of posts during the week and each time they leave some clue to what is wrong. Even if it has already been asked before! Pulling teeth, is just the start of it, the pain will going away after awhile.

It is definitely worth the effort to take some time and learn this fabulous framework. Just my 2 cents worth.
Mark

PS: I would comment out the expander role in the coding, and make sure the code is getting a response back from the server before I jumped any further into the grid component.