My First ExtJS DataGrid Pt 6: The Grid
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.
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 post. Let's add to it a little bit by stating that the grid may be resizable.
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.
grid.render();
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.
// 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.
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 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.
The other great thing to think about are the new UI components that are included through ColdFusion 8's new tags. Most of those components are from the ExtJS library, so learning how some of it works 'under the hood' now will give ColdFusion developers a leg up later when wanting to customize those components further.
Actually, this DataGrid (the ExtJS DataGrid component) is probably exactly what you are looking for. You can 'style' it almost exactly the same as the example you posted with some minor tweaking of the CSS.
Can i have a ViewAll option in the paging toolbar?