CODEWITHSUNDEEP
javascriptjsonextjsgridextjs6
user3740961
user3740961

Reputation: 329

Extjs 6 grid + JSON

I have this JSON:

{
    "aaa": {
        "list": {
            "count":"1",
            "data": [
                {"id":"1","username":"user1","email":"[email protected]"}
            ]
        }
     }
}

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)

Upvotes: 0

Views: 1283

Answers (3)

Tarabass
Tarabass

Reputation: 3150

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'
}

Upvotes: 1

SelfSurgery
SelfSurgery

Reputation: 382

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

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30092

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

Upvotes: 0

Related Questions