EXTJS 4 nested json array data to grid panel - arrays

Question

I'm new to ExtJS but I am unable find anyway to populate my grid with a simple JSON array of strings. My JSON looks like this:
{
...stuff...
"users": ["kevin","ryan", "david", "mark", "ed"]
...more stuff...
}
I want to populate a simple one column grid with this list of users, but can't seem to find any way to do it! :(
My code looks like this:
Ext.define('usersModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'users', type: 'auto'}]
});
var usersStore = Ext.create('Ext.data.Store', {
model: 'usersModel',
proxy: {
type: 'ajax',
url : '/users',
reader: 'json'
},
autoLoad: true
});
// create the Grid
Ext.create('Ext.grid.Panel', {
store: usersStore,
columns: [{
dataIndex: 'users',
width: 500,
text: 'User'
},
],
});
But it just displays a comma separated list of the users in one cell. I can see why it would do that, I'm setting the dataIndex of the column to be the array, not the elements in the array, but have no idea how to fix it.

Answer 1

Try this:
Ext.define('usersModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'name', type: 'auto'}]
});
var usersStore = Ext.create('Ext.data.Store', {
model: 'usersModel',
proxy: {
type: 'ajax',
url : '/users',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
// create the Grid
Ext.create('Ext.grid.Panel', {
store: usersStore,
columns: [{
dataIndex: 'name',
width: 500,
text: 'User'
},
],
});