Code:
// Store de valores
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php-grid-group.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
id: 'id',
root: 'INDUSTRIA',
totalProperty: 'TOTAL',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'excerpt'},
{name: 'industry'}
]
})
});
// Colunas de registros
var cm = [
{id:'company', header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'},
{header: "Industry", width: 85, sortable: true, hidden: true, dataIndex: 'industry'}
];
var filters = new Ext.grid.GridFilters({
filters:[
{type: 'string', dataIndex: 'company'},
{type: 'numeric', dataIndex: 'price'},
{type: 'numeric', dataIndex: 'change'},
{type: 'date', dataIndex: 'lastChange'}
]});
// Barra superior de menu de botões
var barSup = [
{
text: 'Voltar',
tooltip: 'Voltar',
icon: 'back.png',
cls:'x-btn-text-icon',
handler : function() {
grid.removeColumn('company', 'company');
grid.getView().refresh(true);
}
}, {
text: 'Novo',
tooltip: 'Criar no Item',
icon: 'add.png',
cls:'x-btn-text-icon'
//handler : handleAdicionar
}, {
text: 'Editar',
tooltip: 'Editar Registro Selecionado',
icon: 'edit.png',
cls:'x-btn-text-icon'
//handler : handleAdicionar
}, {
text: 'Remover',
tooltip: 'Remover Selecionado(s)',
icon: 'remove.png',
cls:'x-btn-text-icon'
//handler : handleAdicionar
}
];
// create the Grid
var grid = new Ext.grid.GridPanel({
id: 'grid',
store: store,
columns: cm,
tbar: barSup,
renderTo: document.body,
plugins: [filters],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 10,
plugins: [filters]
})
});
store.load();