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 Grid

Alright, rolling right along. Last tutorial we covered the initial setup of our ColumnModel, which is telling our DataGrid what the basic layout of our grid columns will be and to which fields of our DataStore each column will be mapped to. Now it's time to actually instantiate our grid.

So, the first thing we have to do is create our Grid object and tell it which html element will be our grid within our page. Basically we'll tell the function the ID of the div element, what DataStore object to use, and which ColumnModel object to use.

// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
     ds: ds,
     cm: cm
});

This is it in it's most basic form. We're going to stay away from any fancy stuff for now, and get to selection models and stuff in a later tutorial. Let's add to it a little bit by stating that the grid may be resizable.

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
     wrap:true,
     minHeight:100,
     pinned:true,
     handles: 's'
});
rz.on('resize', grid.autoSize, grid);

That will make the grid resizable, and should be declared prior to rendering the grid. Rendering the grid is our next step, and way simple.

// render it
grid.render();

Can't get much easier than that. Next we'll need to add the paging tool bar to the footer. We'll get the footer, then add the paging toolbar.

var gridFoot = grid.getView().getFooterPanel(true);
 
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
     pageSize: 25,
     displayInfo: true,
     displayMsg: 'Displaying users {0} - {1} of {2}',
     emptyMsg: "No users to display"
});

Notice the arguments of the PagingToolbar() function, the footer object, the DataStore object, and a JSON object with attributes of the pageSize (number of records), whether to display data set info, the message of the count, and a message to display should no records be returned.

The final step here is to load the DataStore. Once this is done you will have a complete, basic DataGrid for display.

// trigger the data store load
ds.load({params:{start: 0, limit: 25}});

Notice here the 'params'. These are name/value pairs that are passed, via post, whenever you request the next page of your data, with these values being your initial request (starting at row 0, returning 25 records). If you go back and look at your pagingService.cfm (included in the download) you'll see where these values are used.

So, that's the end of this tutorial. You now have a basic DataGrid. In our next tutorial we'll start to style some things by showing you how to implement a custom 'renderer' for a specific column's data.

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

• Ext Programmer's API Documentation
• Ext User Forums