Reputation: 23
I am using ExtJS 4.0.7 and I am using JSON Store to load it to the Panel Grid. I am using Firefox version 16.0.2. It is very simple example, I am able to run Array grids.
Ext.onReady(function() {
var Grid1Store = new Ext.data.JsonStore({
root: 'users',
fields: [ 'id', 'name', 'email' ],
autoLoad: true,
data: { users: [
{ "id": 1, "name":"John Smith", "email":"[email protected]"},
{ "id": 2, "name":"Anna Smith", "email":"[email protected]"},
{ "id": 3, "name":"Peter Smith", "email":"[email protected]"},
{ "id": 4, "name":"Tom Smith", "email":"[email protected]"},
{ "id": 5, "name":"Andy Smith", "email":"[email protected]"},
{ "id": 6, "name":"Nick Smith", "email":"[email protected]"}
]}
});
var Grid1Grid = new Ext.grid.GridPanel({
store: Grid1Store,
renderTo: 'grid-example',
title: 'Target',
width: 300,
columns: [
{
id: 'name',
header: "Name",
sortable: true,
dataIndex: 'name'
},{
id: 'email',
header: "Email",
sortable: true,
dataIndex: 'email'
}
]
});
});
Grid is loading and no data is displayed. It is showing a blank grid. I am not sure about the issue. Is it due to some browser compatibility issue?
Upvotes: 2
Views: 3097
Reputation: 1254
Your store is local. Do not use root attribute
var Grid1Store = new Ext.data.JsonStore({
fields: [ 'id', 'name', 'email' ],
autoLoad: true,
data: [
{ "id": 1, "name":"John Smith", "email":"[email protected]"},
{ "id": 2, "name":"Anna Smith", "email":"[email protected]"},
{ "id": 3, "name":"Peter Smith", "email":"[email protected]"},
{ "id": 4, "name":"Tom Smith", "email":"[email protected]"},
{ "id": 5, "name":"Andy Smith", "email":"[email protected]"},
{ "id": 6, "name":"Nick Smith", "email":"[email protected]"}
]
});
Upvotes: 1