EXT Ajax Grid Part 1

I recently posted an example on using one of the Coldfusion 8 Ajax CFGRID. I also mentioned at the time that it's based upon the GUI Library found at ExtJS.com. Well I thought it would be a good idea to also show an example on how to set up a grid using the library.

In Part one I will introduce you to the front end part, that is the javascript code to set up the grid, as well as what files you need to include in order to get it working. The next part we will go through the Javascript. And then in the final part I will show you how I set up the return data. Since I do not have Coldfusion 8 on my hosting provider we will build then entire thing using Coldfusion 6 or MX tags and functions.

So lets get started....

There are some necessary files you need to include at the top of the page that you want to have the grid on. The files are the base Yahoo utilities file, an yahoo to ext adapter and then the main ext library. Jack recently moved away from dependence on a third party base library and has created his own so in the future we won't need to have the yui-utilities included but the ext base library instead.

If you don't have the base library yet you can get it from the Extjs download area.

Put the code below into the html head of your page making sure to change the paths to where you have your resources.


<!-- these two library's must be included before any others -->
<script type="text/javascript" src="resources/javascript/yui-utilities.js"></script>
<script type="text/javascript" src="resources/javascript/ext-yui-adapter.js"></script>
<!-- the main ext library -->
<script type="text/javascript" src="resources/javascript/ext-all.js"></script>
<!-- this is the main styleshee, it is also broken down into separate stylesheets for each 'widget' -->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

The next thing we will do is set up our grid. In the head area of your HTML document drop in the following:


<script language="javascript">
Ext.onReady(function(){

// create the Data Store

var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url: '../com/gg/ajaxwrapper.cfc?method=getfiles',
            method:'post'
}),
// set up the data reader

reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'recordcount',
id: 'name'
}, [
{name: 'name', mapping: 'name'},
{name: 'size', mapping: 'size',type:'int'},
{name: 'directory', mapping: 'directory', type: 'int'},
{name: 'datelastmodified', mapping: 'datelastmodified', type: 'date'}
]),

// turn on remote sorting

remoteSort: true
});
    

ds.setDefaultSort('datelastmodified', 'desc');
    
    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([{
id: 'name', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Name",
dataIndex: 'name',
css: 'white-space:normal;'
},{
header: "Size",
dataIndex: 'size',
width: 100
},{
header: "Directory",
dataIndex: 'directory',
width: 70,
hidden:true
},{
id: 'datelastmodified',
header: "Last Modified",
dataIndex: 'datelastmodified',
width: 200,
renderer:renderdate
}]);

// by default columns are sortable

cm.defaultSortable = true;

// make the grid resizable, do before render for better performance

var rz = new Ext.Resizable('file-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

// render it

grid.render();

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}});
});
</script>

Then the body of the html document you only need the following:


<body>
<div style="margin-left:100px;margin-top:50px">
    <div id="file-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 400px; height: 300px;"></div>
</div>

</body>

You can see the results here

Related Blog Entries

7 Comments to "EXT Ajax Grid Part 1"- Add Yours
Possum Jones's Gravatar Can we see the code for file dspGrid.cfm?
# Posted By Possum Jones | 7/10/07 2:50 AM
Gary Gilbert's Gravatar I changed the code slightly to point to a component.

You can find it at http://www.garyrgilbert.com/blog/index.cfm/2007/7/...

I will update this code to reflect that change.

Thanks for your feedback!
# Posted By Gary Gilbert | 7/11/07 7:03 PM
Dav R's Gravatar Nice Article Gary!...
# Posted By Dav R | 7/19/07 9:18 AM
khalid Rauf's Gravatar hi ,
i was not able to get and set the properties of "ColumnModel" , thanks for authour who made my way clearer towards "ColumnModel"
# Posted By khalid Rauf | 4/24/08 12:43 PM
YOYO's Gravatar Hello, is there any sample of how to connect to database?
# Posted By YOYO | 7/22/08 2:29 PM
Gary Gilbert's Gravatar @YOYO,

I have a tutorial on how to connect to a database using coldfusion that you can find if you follow the link below

http://garyrgilbert.com/tutorials/coldfusion/begin...

If you have any other tutorial request let me know
# Posted By Gary Gilbert | 7/22/08 2:32 PM
# Posted By sdsfd | 8/16/08 8:04 PM

Powered By Railo

Subscribe

Subscribe via RSS
Follow garyrgilbert on Twitter 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

My Amazon.com Wish List