Extjs 6 grid + JSON

Question

I have this JSON:

{
    "aaa": {
        "list": {
            "count":"1",
            "data": [
                {"id":"1","username":"user1","email":"user1@test.com"}
            ]
        }
     }
}

And this is my Store:

var store = Ext.create('Ext.data.Store', {
    fields : [ 'id', 
               'username', 
               'email'],
    autoLoad : true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'server/users'
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data',
            messageProperty: 'message'
        }
    }
});

And this is my Grid:

xtype: 'grid',
title: 'Users',
id: 'users', 
store: store,
columns: {
  items: [
    {text: 'ID', dataIndex: 'id', editor: 'textfield'},
    {text: 'Name', dataIndex: 'name', editor: 'textfield' },
    {text: 'Email', dataIndex: 'email', editor: 'textfield' },
]
},

But this code is not working. I don't show JSON data on my grid. I think the problem is that I don't reach JSON elements.
How can I reach this elements? (aaa.data.id, aaa.data.name, aaa.data.email is not working)

if the path is always static you can specify `'root':'aaa.list.data'` in the `reader` `config` — weeksdev, Sep 15 '15 at 21:07

Tarabass · Accepted Answer · 2015-09-17T20:58:49.420

1

Since you don't want (or can't) change the structure of your JSON, change the reader of the proxy on your store to correspondent with the data structure of your JSON.

reader: {
    type: 'json',
    rootProperty: 'aaa.list.data',
    totalProperty: 'aaa.list.count'
}

edited Sep 17 '15 at 20:58

answered Sep 15 '15 at 20:32

Tarabass

3,132
2
17
35

score 0 · Answer 2 · answered Sep 15 '15 at 20:31

The root should be root: 'aaa.list.data'. The root is supposed to point to the array of records. data doesn't appear in the top level object returned at all. It would be like saying:

var o = {
    aaa: {
        data: [{}]
    }
}
console.log(o.data); // Nothing

score 0 · Answer 3 · answered Sep 15 '15 at 20:44

0

You can use the reader's transform method to format the data before the store processing takes place.

answered Sep 15 '15 at 20:44

SelfSurgery

382
3
11

Extjs 6 grid + JSON

3 Answers3