From Learn About the Ext JavaScript Library

For the past several months I have explored using the ExtJS library of components. After many false starts along the way, and long periods of trial and error, I've finally come to better understand the library and it's implementation. Now I want to share that with everyone, as simply as I can, so that you might not struggle as I have. This series will deal with creating your own DataGrid, and be broken up in a way so as to explain the various parts needed.

I will not go over setting up a server side paging query here, as that is not specific to the ExtJS library. For a reference, there is an example in ColdFusion posted on Cutter's Crossing. You will need to set up a server side paging query, in the language of your choice, to work with the tutorial.

The ColumnModel

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 our DataStore.

First things first, let's instantiate the ColumnModel

var cm = new Ext.grid.ColumnModel([{
     // cm is our ColumnModel object
 
}]);

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

var cm = new Ext.grid.ColumnModel([{
        id: 'fname',
        header: "First Name",
        dataIndex: 'vcFirstName',
        width: 120
     }
}]);

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 ('config options') 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.

var cm = new Ext.grid.ColumnModel([{
        id: 'fname',
        header: "First Name",
	dataIndex: 'vcFirstName',
	width: 120
     },{
	header: "Last Name",
	dataIndex: 'vcLastName',
	width: 120
	},{
	header: "Is Admin",
	dataIndex: 'bIsAdministrator',
	width: 40
     },{
	header: "Is Active",
	dataIndex: 'bIsActive',
	width: 40
     },{
	id: 'last',
	header: "Last Login",
	dataIndex: 'tsDateLastLogin',
	width: 150
}]);
// by default columns are sortable
 
cm.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.

Source code for this part of the tutorial is available from Cutter's Crossing.

• Ext Programmer's API Documentation
• Ext User Forums