Many moons ago, I wrote a series on My First Ext JS Data Grid. It was very popular. In fact, it got me the gig co-authoring two books on Ext JS and spawned an open source project targeted at integrating Ext JS with ColdFusion. But, I did that series back in 2007, using Ext JS 1.1 (maybe?), and an update is long overdue.

Today I'll start that update. Well, actually it began almost two weeks back, when I announced the update to CFQueryReader. In that post, and in the demo code in the GitHub download, I show you how to define a data Model and a data Store, using CFQueryReader as a custom data Reader. What isn't in the post (though it is in the GitHub download), is how easy it is to create a data grid with Ext JS 4.1

view plain print about
1Ext.create('Ext.grid.Panel', {
2    title: 'Testing: getWithMeta (query as part of custom struct)',
3    store: Ext.getStore('entryStore'),
4    renderTo: 'demo',
5    columns: [
6     {header: 'ID', dataIndex: 'id'},
7     {header: 'Title', dataIndex: 'title'},
8     {header: 'Posted', dataIndex: 'posted'},
9     {header: 'Views', dataIndex: 'views'}
10    ],
11 width: 380,
12 height: 600

The really important pieces here are the store, renderTo, and columns configuration options. The store references the storeId of the data store you create to feed the grid. The renderTo references the id of a div element to render the grid within, on your page. The columns option defines, in order, the columns to display within the grid. In this configuration we have the minimum information needed: the header title of the column and the data field the column will map to. That's it! Oh, sure, there's a lot more you can do: paging bars and column renderers and grouping and stuff. We'll get into it. But, for now, this is all you need to create a very basic grid in Ext JS 4.1. You can download the demo code from the CFQueryReader GitHub repository.