1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    5
    Vote Rating
    0
    JamesColburn is on a distinguished road

      0  

    Smile Wiring a JSONReader to a GridPanel

    Wiring a JSONReader to a GridPanel


    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.)


    Code:
    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);
            }
    }

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Why not use it as documented?

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    5
    Vote Rating
    0
    JamesColburn is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    704
    Vote Rating
    30
    carol.ext has a spectacular aura about carol.ext has a spectacular aura about

      0  

    Default


    {"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"}]}

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    5
    Vote Rating
    0
    JamesColburn is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Jul 2008
    Posts
    5
    Vote Rating
    0
    JamesColburn is on a distinguished road

      0  

    Default Solution

    Solution


    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:

    Code:
    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);
            }
    }

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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...