Wiring a JSONReader to a GridPanel

[JamesColburn]

Hi,

I have worked through the tutorial here: http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0

And have been pouring over http://extjs.com/deploy/dev/docs/?cl...ata.JsonReader in the API.

I am trying to extend the grid example near the bottom of the tutorial by using a JSONReader which reads results from an http call. I think my problem is in the way I am assigning the data/reader for the GridPanel. Any help is much appreciated.

(Also, as a side question. Where can I find info about decoding the exception thrown? I can't figure out how to extract any useful info from it.)

Ext.onReady(function(){
    Ext.get('okButton').on('click', function(){
    
        // Basic request
        Ext.Ajax.request({
           url: 'http://localhost:8080/GetGridData.go',  // see loadGridData for sample response
           method: 'GET',
           success: loadGridData,
        });
    
    });
});

function loadGridData(result) {

        ///
        //   the JSON returned from the server, result.responseText :
        //     {"total":1,"rows":{"mydata":"A bit of text","name":"Jimmy"}}
        //

        try {

            // this decodes fine without error. So the JSON is valid.
             var jsonData = Ext.util.JSON.decode(result.responseText);
            //

            var MyRecord = Ext.data.Record.create([
                {name: 'name', mapping: 'name'},
                {name: 'mydata'}
            ]);
            var myReader = new Ext.data.JsonReader({
                totalProperty: "total",    
                root: "rows",                
                id: "name"                   
            }, MyRecord);
            

// Below I have tried assigning data: 'jsonData' from above, myRead.read(result)
// result.responseText... nothing seems to work

            var grid = new Ext.grid.GridPanel({
                store: new Ext.data.Store({
                    data: result,  
                    reader: myReader
                }),
                columns: [
                    {header: 'Name', width: 120, sortable: true, dataIndex: 'name'},
                    {header: 'MyData', width: 90, sortable: true, dataIndex: 'mydata'}
                ],
                viewConfig: {
                    forceFit: true
                },
                renderTo: 'content',
                title: 'My First Grid',
                width: 500,
                frame: true
            });           
            
        }
        catch (err) {
            Ext.MessageBox.alert('ERROR', 'Could not decode ' + result);
        }
}

[Animal]

Why not use it as documented?

[JamesColburn]

Which doc?

The tutorial I referenced uses static data and an ArrayReader. The JSONReader documentation has nothing regarding linking it with a GridPanel.

If you there is a link connecting these two concepts it would be appreciated.

[carol.ext]

{"total":1,"rows":{"mydata":"A bit of text","name":"Jimmy"}}

doesn't "rows" need to be an array [] ?

{"total":1,"rows":[{"mydata":"A bit of text","name":"Jimmy"}]}

[JamesColburn]

Ahhh.... Thx carol. I think you might have it. That is in the doc and I didn't notice that re: my JSON. I'll try this out when I get home.

Thx again.

[Animal]

Just hook the Store up to a URL, and let it do the comms. You don't need to do all that.

[JamesColburn]

Both Carol and Animal were right. JSON was wrong(rows not in an array) and just using a JsonStore directly was much easier. Here is the final solution:

Ext.onReady(function(){

    Ext.get('okButton').on('click', function(){    
        loadGridData();
    });

});

function loadGridData() {
        
        try {        
            var myRecord = Ext.data.Record.create([
                {name: 'name', mapping: 'name'},    
                {name: 'date'}                
            ]);
            var myStore = new Ext.data.JsonStore({
                url: 'http://localhost:8080/GetGridData.go',
                root: 'rows',
                fields: MyRecord
            });
            
            myStore.load();
            
            var grid = new Ext.grid.GridPanel({
                store: myStore,    
                columns: [
                    {header: 'Name', width: 120, sortable: true, dataIndex: 'name'},
                    {header: 'Data', width: 90, sortable: true, dataIndex: 'data'}
                ],
                viewConfig: {
                    forceFit: true
                },
                renderTo: 'content',
                title: 'My First Grid',
                width: 500,
                frame: true
            });
            
        }
        catch (err) {
            Ext.MessageBox.alert('ERROR', 'Could not decode ' + result);
        }
}

[mjlecomte]

Looks like you're a fresh face on the forums. Since you cited the Introduction tutorial perhaps you stopped there and didn't come across some of the other tutorials yet. For your information there are more tutorials on grids and other widgets about that may have shed some light for you. Maybe have a casual glance around through the tutorials to see what's around...