OK, we're winding down to the end of this tutorial, with only a few key components left. Today we cover the ColumnModel, which is how we manage the initial layout of our ExtJS DataGrid. We've already covered initial setup, our paging query, and defined out DataStore (see related entry links at the bottom of the post).

First things first, let's instantiate the ColumnModel

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    // cm is our ColumnModel object
3
4}]);

Next we'll define the layout of the first column in our grid

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    id: 'fname',
3    header: "First Name",
4    dataIndex: 'vcFirstName',
5    width: 120
6 }
7}]);

Alright, pretty basic stuff here. We've placed an 'id' on this column. This allows you to later reference the column specifically for styling. We didn't really mark this one for a particular reason, we just did it to explain. Next we have the 'header', which is the text that appears in your column header at the top of your DataGrid. This is then followed by the 'dataIndex' to define the data column it is mapped to within your DataStore. Lastly we have the 'width' attribute, which speaks for itself.

There are several other possible attributes that are available to you here, most of which are fairly easy to grab from the ExtJS API. We'll cover a few more in our next tutorial, but for now we'll just complete the layout of the ColumnModel.

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    id: 'fname',
3    header: "First Name",
4    dataIndex: 'vcFirstName',
5    width: 120
6 },{
7    header: "Last Name",
8    dataIndex: 'vcLastName',
9    width: 120
10    },{
11    header: "Is Admin",
12    dataIndex: 'bIsAdministrator',
13    width: 40
14    },{
15    header: "Is Active",
16    dataIndex: 'bIsActive',
17    width: 40
18    },{
19    id: 'last',
20    header: "Last Login",
21    dataIndex: 'tsDateLastLogin',
22    width: 150
23}]);
24// by default columns are sortable
25
26cm.defaultSortable = true;

The order you work in will be reflected in your final initial layout. Each column definition is contained in curly braces, separated by commas. Each attribute is also comma delimited, with the attribute name being un-quoted, while their values are quoted if string values and not if numeric. Also notice the double quotes around the 'header' values, but the single quotes around the others. I don't know if this is intentional, and haven't really tested it, but this is the way it was in all of the example files so I thought it best to stick with the convention. The last thing we did here was set a directive on the ColumnModel to state the the columns will be sortable by default.

Alright, now you have defined your ColumnModel. A few steps left to go just yet, like the grid itself, custom renderers, styles, and other things to give it a little more cowbell. We'll begin wrapping those up in our next edition. For those coming to the Nashville CFUG Scorpio Tour presentation tomorrow night I hope you'll flag me down and say high.