Wish List
Tags
adobe air ajax coldfusion examples ext flex javascript max2007 misc technology ui
Recent Entries
Adobe Releases Flash 10 (beta)
Adobe Needs Your Feedback - Enter to win a prize!
A Question of Speed
It's a BOY!
Unit Testing Functions that Access Web-Services
Search
RSS
Subscribe
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.
<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:
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:
<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
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!
i was not able to get and set the properties of "ColumnModel" , thanks for authour who made my way clearer towards "ColumnModel"