display specific json data in a grid

[avivenna]

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

[Santosh Dhumale]

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.

[sword-it]

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

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:

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()
});

[avivenna]

It worked many thanks