Code:
Ext.onReady(function() {
var movieStore = new Ext.data.Store({
url: 'movies.json',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'id'
}, [
'id',
'coverthumb',
'title',
'director',
{ name: 'released', type: 'date', dateFormat: 'Y-m-d' },
'genre',
'tagline',
{ name: 'price', type: 'float' },
{ name: 'available', type: 'bool' }
])
});
movieStore.load();
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
title: 'Movie Database',
height: 300,
width: 800,
enableColumnMove: true,
store: movieStore,
plugins: [new Ext.ux.grid.GridHeaderFilters()],
cm: new Ext.grid.ColumnModel([{
id: 'title',
header: "Titre",
width: 300,
sortable: true,
dataIndex: "title",
filter: { xtype: "textfield", filterName: "title" }
}, {
id: "director",
header: "Realisateur",
width: 200,
sortable: true,
dataIndex: "director",
filter: { xtype: "textfield" }
}, {
id: "released",
header: "Date de sorti",
width: 75,
sortable: true,
dataIndex: "released",
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
filter: { xtype: "textfield" }
}, {
id: "genre",
header: "Genre",
width: 100,
sortable: true,
dataIndex: "genre",
filter: { xtype: "textfield" }
}])
});
}); //end onReady
This sample comes from a book, but I think it's not really up to date.