EXT Ajax Grid Part 4
We continue where we left off in EXT Grid Part 3. I won't bother this time in having the entire script block again rather just focusing on the next part of interest.
function renderdate(value){
return value.dateFormat('M j, Y, g:i a');
}
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
header: "Name",
dataIndex: 'name',
css: 'white-space:normal;'
},{
header: "Size",
dataIndex: 'size',
width: 100
},{
header: "Directory",
dataIndex: 'directory',
width: 70,
hidden:true
},{
header: "Last Modified",
dataIndex: 'datelastmodified',
width: 200,
renderer:renderdate
}]);
// by default columns are sortable
cm.defaultSortable = true;
In the previous post we went through the setup of the data store for our grid as well as how we want to map the returned JSON data. In this post we will look at how we will define the columns of our grid using the ColumnModel.
Within the column model we have a lot of options on how we would like each column rendered, whether to use a fixed width or a custom cell renderer, or specify specific css. We can even specify our cell editor in the case that this was an editable grid.
It is relatively simple to create a custom format render as the code below shows.
function renderdate(value){
return value.dateFormat('M j, Y, g:i a');
}
The value passed is the value for the specified cell. Since we specified that the data-type of our cell in our data map to be of a date type we simply need to use the dateFormat method of date to return out date formated the way we want.
NOTE:
A word of caution here is that it does not support international date names. You must return your date in your JSON data in any form that doesn't day, month, or year names or short forms. You can then format it how you like so long as if you decide to display text its English.You could, however do the formatting on the server side and pass your date as a string instead then of course you wouldn't need to worry about the renderer at all.
The next bit of Javascript that we we will look it is the footer panel.
var gridFoot = grid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 10,
displayInfo: true,
displayMsg: 'Displaying files {0} - {1} of {2}',
emptyMsg: "No Files to display"
});
// trigger the data store load
ds.load({params:{start:0, limit:10}});
The first thing we do here is define a variable to hold the grid footer. We return the footer panel by using the getView method of the GridView class which is part of the overall grid. By default the footer panel is hidden so we pass true in the method call so that it will be displayed.
The next thing we do is set up our paging toolbar. The paging toolbar as you guessed is a specialized toolbar that is bound to a data store to provide paging controls. It is pretty customizable so would encourage you to check out the api documentation
In our implementation of the paging toolbar we pass the variable containing the footer panel, our data store and some configuration options. Specifically the number of items per page, display message, empty message.
The very last thing we do is make a call to our data store's load method to start the asynchronous call to get the data. Because we are using remote paging we must passing along the start and limit parameters.
And that wraps up the series on the EXT grid.
Until next time, Happy Coding...
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript jquery max2007 max2008 misc open source programming railo software technology ui
Recent Entries
No recent entries.
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
There are no comments for this entry.
[Add Comment]