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.

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'
7});
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
2grid.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.

view plain print about
1var gridFoot = grid.getView().getFooterPanel(true);
2
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"
9});

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.

Where is Cutter?

Well, It's good to be back (so to speak). I had a nice bout of the stomach flu, and it was no fun. But now I'm back in the saddle and ready to go. I should post the next phase of my EXT UI DataGrid tutorial within the next few days, and I hope to get back to my Creating The View tutorial very shortly (next stop: Mach II).

This very minute, though, I'm sitting in the Nashville International Airport preparing to fly out for the weekend. My stepfather has been asking me, for half a decade now, to join him for the Indy 500. No reason to say no this year, so I'm waiting on a flight to Charlotte, North Carolina where I'll catch a connection to Dayton, Ohio. We're going to check out a few things in John's hometown before making the trip in Sunday for the race. I personally have never been a huge racing fan, but the Indy 500 is an event. It would be kind of like turning down a trip to the Kentucky Derby, the World Series, or the Super Bowl. So, I'm in for the new experience and little time with my step dad.

Which is interesting in regards to my DataGrid tutorial. IndyCar.com is highlighted on the home page of Jack Slocum's Ext JS UI library as a site that uses the javascript components extensively, sporting a cool AJAXified interface that provides real time racing data during Indy races.

So, I'll try to knock out the next installment of my DataGrid tutorial while I wait around in airports. See if I can get this train moving again. I'll also fill you in on the fun of the weekend as I go along.