In last posts i explained about the Array grid and grouping grid. Now i will explain about the Json Grid.
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": "jsmith@example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith@example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith@example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith@example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith@example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith@example.com"
}]
}
});
var onReadyFunction = function () {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Database',
width: 500,
height: 300,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id'
}, {
header: "Name",
dataIndex: 'name'
}, {
header: "Email",
dataIndex: 'email'
}]
});
}
Ext.onReady(onReadyFunction);
});
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": "jsmith@example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith@example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith@example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith@example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith@example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith@example.com"
}]
}
});
var onReadyFunction = function () {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Database',
width: 500,
height: 300,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id'
}, {
header: "Name",
dataIndex: 'name'
}, {
header: "Email",
dataIndex: 'email'
}]
});
}
Ext.onReady(onReadyFunction);
});
No comments:
Post a Comment