1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    3
    Vote Rating
    0
    heikan is on a distinguished road

      0  

    Red face How to load JSON object into GridPanel locally?

    How to load JSON object into GridPanel locally?


    JSON object (amOJSON) read by Ext.util.JSON.decode:
    {success : true,
    result : {count : 2,
    records : [{name : 'User1', cuid : 'U1'},
    {name : 'User2', cuid : 'U2'}
    ]
    }
    }

    Code:
    Ext.onReady(function() {
    var amOUserRecord = new Ext.data.Record.create([{name : "name"},
    {name : "cuid"}
    ]
    );
    var amOGrReader = new Ext.data.JsonReader({root : "records",
    id : "cuid",
    totalProperty : "count"
    }, amOUserRecord
    );
    var amOGrStore = new Ext.data.Store({reader : amOGrReader,
    autoLoad : false,
    data : amOJSON.result
    });
    amOGrStore.load({callback : loadCallback}); // <==== failed!!! with 'length' is null or not an object


    function loadCallback(r, option, success) {
    alert(success);
    if (success) {
    //amOGr.render(root.div);
    } else
    alert("failure to load");
    }

    }


    Can anyone help? I just want to load a JSON object into Ext.data.Store that is used in a GridPanel. As I know, a JsonStore is used to load JSON remotely. Can anyone show me how to read a local JSON object into GridPanel? Thanks.

  2. #2
    Ext User
    Join Date
    Oct 2008
    Location
    Norway
    Posts
    106
    Vote Rating
    0
    Drayton is on a distinguished road

      0  

    Default


    Quote Originally Posted by heikan View Post
    JSON object (amOJSON) read by Ext.util.JSON.decode:
    {success : true,
    result : {count : 2,
    records : [{name : 'User1', cuid : 'U1'},
    {name : 'User2', cuid : 'U2'}
    ]
    }
    }
    Well first of all, that is a standard object, not a JSON object, so feeding that to JsonReader shouldn't work as it expects the data to be JSON encoded.

    I'll see if I can provide an example solution for you.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use your Record constructor to create a new Record.

    Add that to the Grid's Store.

  4. #4
    Ext User
    Join Date
    Oct 2008
    Location
    Norway
    Posts
    106
    Vote Rating
    0
    Drayton is on a distinguished road

      0  

    Default


    Example:

    Code:
    var jSource = '{"success":true,"result":{"count":2,"records":[{"name":"User1","cuid":"U1"},{"name":"User2","cuid":"U2"}]}}';
    
    var myReader = new Ext.data.JsonReader({
            root: 'result.records'
        },Ext.data.Record.create([{name: 'name'},{name: 'cuid'}])
    );
    
    var store = new Ext.data.Store({reader: myReader});
        store.loadData(Ext.util.JSON.decode(jSource));
    
    new Ext.Window({
        width: 300,
        height: 300,
        layout: 'fit',
        items: new Ext.grid.GridPanel({
                store: store,
                columns: [
                    {header: "Name", width: 120, sortable: true, dataIndex: 'name'},
                    {header: "Cuid", width: 120, sortable: true, dataIndex: 'cuid'},
                ],
                viewConfig: { forceFit: true },
                sm: new Ext.grid.RowSelectionModel({singleSelect:true})
            })
    }).show();
    I'm guessing there might be a simpler way to do it but I don't have the time to experiment with it

  5. #5
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    696
    Vote Rating
    27
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    If you remove the quotes from the json, no need to decode:

    Code:
    var jSource = {"success":true,"result":{"count":2,"records":[{"name":"User1","cuid":"U1"},{"name":"User2","cuid":"U2"}]}};
    
    ...
    
    store.loadData(jSource);

  6. #6
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    696
    Vote Rating
    27
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    Here's an example that loads local json data, Group Summary Plugin

  7. #7
    Ext User
    Join Date
    Oct 2008
    Location
    Norway
    Posts
    106
    Vote Rating
    0
    Drayton is on a distinguished road

      0  

    Default


    Quote Originally Posted by carol.ext View Post
    If you remove the quotes from the json, no need to decode:
    Yep, I only put it in there to illustrate how to handle a json encoded string as readRecords don't call eval() on its argument.

    If one were to take responseText from a proxy and feed it to readRecords() it would fail without a decode first.

  8. #8
    Sencha User
    Join Date
    Sep 2010
    Posts
    6
    Vote Rating
    0
    saurabh_agarwal15 is on a distinguished road

      0  

    Default


    Hi All,

    I am using JSON for loading a grid. The scenario is such that I am getting a json created on the server and then using a grid panel to display the content in it. Once the content is displayed I am giving user the feasibility to edit the content using the pop up and populating the data (for the selected row). Everything is working fine. I am able to load the grid panel. I am able to load the data in the pop up window as well, in all the scenarios except one.
    The issue is in my json there is a key which can have multiple values at any instant. So, I was using split function, using ',' as a delimeter, after accessing the data from the JSON DataStore. But the execution of spli function is thgrowing an error 'object does not support this property'.
    Find below the data store and the json data along with the method by which i am trying to access the data.


    Code:
    {           
       "id": "1",
       "text": "Home",
       "subjectlist":[{eng},{math},{science}]
    }
    Let say myDataStore is the name of the DataStore which is used at the client side to load the above JSON data then I am using:
    Code:
    var subjectListVariable = myDataStore.get("subjectlist") ;
    When I am using alert on the subjectListVariable it is showing "eng,math,science" but when I am using
    var subjectMembers = subjectListVariable.split(",");
    It is cribbing and throwing error Object doesnot support this property.

    Kindly help!
    I am lost!


    Thanks in advance
    Saurabh

  9. #9
    Sencha User
    Join Date
    Jul 2014
    Posts
    9
    Vote Rating
    0
    mangeshppatil is on a distinguished road

      0  

    Default


    var myReader = new Ext.data.JsonReader({root: 'countries'},Ext.data.Record.create([{name:'countryDesc'},{name:'ID'}]));above line throwing error likeUncaught TypeError: Cannot read property 'items' of undefined ...any idea??+