1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({
totalProperty: 'total', // total data, see json output
root: 'results', // see json output
url: 'data.php',
fields: [
{name: 'id', type: 'int'},
'user_name', 'body', 'rating'
]
});
// load data from the url ( data.php ) and add start and limit parameter
store.load({params:{start: 0, limit: 10}});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'id',header: "ID", width: 30, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 100, sortable: true, dataIndex: 'user_name'},
{header: 'body', width: 300, sortable: true, dataIndex: 'body'},
{header: 'rating', width: 250, sortable: true, dataIndex: 'rating'}
//--------------------
],
stripeRows: true,
height:350,
width:700,
title:'Paging Grid',
bbar: new Ext.PagingToolbar({
pageSize: 10, // data to display
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
// render this grid to paging-grid element
grid.render('paging-grid');
}); |
