Alright, rolling right along. Last tutorial (see the bottom of this post for a complete listing) 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.

view plain print about
1// create the editor grid
2var grid = new Ext.grid.Grid('topic-grid', {
3 ds: ds,
4 cm: cm
5 });

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 post. Let's add to it a little bit by stating that the grid may be resizable.

view plain print about
1// make the grid resizable, do before render for better performance
2var rz = new Ext.Resizable('topic-grid', {
3    wrap:true,
4    minHeight:100,
5    pinned:true,
6    handles: 's'
8rz.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.

view plain print about
1// render it

Can't get much easier than that. Going back to the resizable for a second, don't ask, I don't know. Easiest one for me to figure on sight is the minHeight attribute, but I haven't reviewed the API enough to know what all is going on. If you figure it out before I do then leave a comment. Next we'll need to add the paging tool bar to the footer. We'll get the footer, then add the paging toolbar.

view plain print about
1var gridFoot = grid.getView().getFooterPanel(true);
3// add a paging toolbar to the grid's footer
4var paging = new Ext.PagingToolbar(gridFoot, ds, {
5 pageSize: 25,
6 displayInfo: true,
7 displayMsg: 'Displaying users {0} - {1} of {2}',
8 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.

view plain print about
1// trigger the data store load
2ds.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 post. You now have a basic DataGrid. In our next tutorial we'll start to style some things, and show you how to implement a custom 'renderer' for a specific column's data.