graphic design, art, typography and architecture

There’s a new library on the block, and it looks pretty good. It’s certainly pretty easy to use and includes lots of widgets - one of the most impressive being the Grid Widget. Now making sortable “tables” is easy! Here’s an example of how easy it really is (besides the data array, which you most likely fetch dynamically from your database, there are only a few lines of code):

Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();

var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
]);

var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});

It couldn’t be easier! I’ll be using this library for one of my client’s sites - I’ll report back on progress.

Read about here on Ajaxian; or, visit the Ext site.