1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    avivenna is on a distinguished road

      0  

    Default Answered: display specific json data in a grid

    Answered: display specific json data in a grid


    Hi All,

    I am new to extjs and trying hard to fulfill a requirement. My url returns the json in following format.


    {"attribute1":"","attribute2":"","attribute3":0,"data":[[1347494589880,1],[1347494589877,1],[1347494589878,1],[1347494589868,1],[1347487222508,1],[1347487222502,1],[1347487222479,1],[1347487222475,1],[1347480054366,1],[1347480054357,1],[1347480054363,1],[1347480054333,1],[1347472874712,1],[1347472874708,1],[1347472874710,1],[1347472874700,1],[1347465617563,1],[1347465617545,1],[1347465617561,1],[1347465617562,1]],"attribute4":20}I need to display all the content in the "data" in a grid.

    like


    1347494589880,1
    1347494589877,1 etcCould someone shed some light on how to get this working. I have been working from 2 days and unable to succeed. Thanks in advance

  2. Hi avivenna,
    The data which you show in your post is in array format. This means if you want that this data will be visible in you grid, you must define a array store for your grid. Review the following example, this may help you:

    Solution 1: By changing the structure of response data from server, means send only data array from the server
    Code:
    var myData = [[1347494589880,1],[1347494589877,1],[1347494589878,1],[1347494589868,1],[1347487222508,1],[1347487222502,1],[1347487222479,1],[1347487222475,1],[1347480054366,1],[1347480054357,1],[1347480054363,1],[1347480054333,1],[1347472874712,1],[1347472874708,1],[1347472874710,1],[1347472874700,1],[1347465617563,1],[1347465617545,1],[1347465617561,1],[1347465617562,1]];
    var gridStore = new Ext.data.ArrayStore({
        fields: [
            {name: 'id'},
            {name: 'count'}
        ],
        data: myData
    });
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: gridStore,
        columns: [
            { text: 'ID',  dataIndex: 'id', width: 200, renderer: function(value, metedata, record){
                return value + ', ' + record.data.count;
            } }
        ],
        height: 200,
        width: 230,
        renderTo: Ext.getBody()
    });
    
    


    Solution 2: You need to call an ajax request to the url & get the data as you given in your post, then from the success handler of that ajax function fill the store as given below:

    Code:
    var myData = {"attribute1":"","attribute2":"","attribute3":0,"data":[[1347494589880,1],[1347494589877,1],[1347494589878,1],[1347494589868,1],[1347487222508,1],[1347487222502,1],[1347487222479,1],[1347487222475,1],[1347480054366,1],[1347480054357,1],[1347480054363,1],[1347480054333,1],[1347472874712,1],[1347472874708,1],[1347472874710,1],[1347472874700,1],[1347465617563,1],[1347465617545,1],[1347465617561,1],[1347465617562,1]],"attribute4":20};
    var gridStore = new Ext.data.ArrayStore({
        fields: [
            {name: 'id'},
            {name: 'count'}
        ]
    });
    // send an ajax request to the url to get the data.
    // from the success of that ajax request, you wil get data from response as
    // myData, then you can call the following line
    gridStore.loadData(myData.data); // this will load the store from the array of data
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: gridStore,
        columns: [
            { text: 'ID',  dataIndex: 'id', width: 200, renderer: function(value, metedata, record){
                return value + ', ' + record.data.count;
            } }
        ],
        height: 200,
        width: 230,
        renderTo: Ext.getBody()
    });
    
    


  3. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    32
    Vote Rating
    0
    Santosh Dhumale is on a distinguished road

      0  

    Default


    I tried something like this.

    I have created one grid panel and creates columns under it. I just set dataIndex: properties to that columns.

    And the dataIndex: property must be same to variable name what you defined while creating grid.

    Hope this may help you.

  4. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi avivenna,
    The data which you show in your post is in array format. This means if you want that this data will be visible in you grid, you must define a array store for your grid. Review the following example, this may help you:

    Solution 1: By changing the structure of response data from server, means send only data array from the server
    Code:
    var myData = [[1347494589880,1],[1347494589877,1],[1347494589878,1],[1347494589868,1],[1347487222508,1],[1347487222502,1],[1347487222479,1],[1347487222475,1],[1347480054366,1],[1347480054357,1],[1347480054363,1],[1347480054333,1],[1347472874712,1],[1347472874708,1],[1347472874710,1],[1347472874700,1],[1347465617563,1],[1347465617545,1],[1347465617561,1],[1347465617562,1]];
    var gridStore = new Ext.data.ArrayStore({
        fields: [
            {name: 'id'},
            {name: 'count'}
        ],
        data: myData
    });
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: gridStore,
        columns: [
            { text: 'ID',  dataIndex: 'id', width: 200, renderer: function(value, metedata, record){
                return value + ', ' + record.data.count;
            } }
        ],
        height: 200,
        width: 230,
        renderTo: Ext.getBody()
    });
    
    


    Solution 2: You need to call an ajax request to the url & get the data as you given in your post, then from the success handler of that ajax function fill the store as given below:

    Code:
    var myData = {"attribute1":"","attribute2":"","attribute3":0,"data":[[1347494589880,1],[1347494589877,1],[1347494589878,1],[1347494589868,1],[1347487222508,1],[1347487222502,1],[1347487222479,1],[1347487222475,1],[1347480054366,1],[1347480054357,1],[1347480054363,1],[1347480054333,1],[1347472874712,1],[1347472874708,1],[1347472874710,1],[1347472874700,1],[1347465617563,1],[1347465617545,1],[1347465617561,1],[1347465617562,1]],"attribute4":20};
    var gridStore = new Ext.data.ArrayStore({
        fields: [
            {name: 'id'},
            {name: 'count'}
        ]
    });
    // send an ajax request to the url to get the data.
    // from the success of that ajax request, you wil get data from response as
    // myData, then you can call the following line
    gridStore.loadData(myData.data); // this will load the store from the array of data
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: gridStore,
        columns: [
            { text: 'ID',  dataIndex: 'id', width: 200, renderer: function(value, metedata, record){
                return value + ', ' + record.data.count;
            } }
        ],
        height: 200,
        width: 230,
        renderTo: Ext.getBody()
    });
    
    

    Last edited by sword-it; 12 Sep 2012 at 11:16 PM. Reason: setting code formatting
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    11
    Answers
    1
    Vote Rating
    0
    avivenna is on a distinguished road

      0  

    Default Thank you

    Thank you


    It worked many thanks

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi