Code:
//Define the model below, map the fields in your JSON coming from the server to the field names in this model
Ext.define('GridModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'company', type: 'string'},
{name: 'price', type: 'string'},
{name: 'change', type: 'string'},
{name: 'pctChange', type: 'string'}
]
});
//Define the store below, providing it the Model and the URL of PHP file
var storeVar = Ext.create('Ext.data.Store', {
pageSize: 5,
model: 'GridModel',
proxy: {
type: 'ajax',
url : 'stores_page_grid.php',
reader: {
type: 'json'
},
extraParams:{
action:'pagingTestGrid'
}
},
autoLoad: false
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
id:'gridId',
store: storeVar,
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
}
],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: storeVar,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
height: 350,
width: 600,
title: 'Array Grid',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
Hope this helps.