01:09 09.09.2007
Ajaxian Featured Tutorial: Extending ColdFusion’s Ajax and UI capabilities
Now that ColdFusion 8 has a bit of built-in Ajax and UI controls, its time to show CF developers some love by dropping a quick set of tutorials into the hopper for them. Something that a lot of CF developers don't know is that many of these new UI controls are based on the Ext framework and thus, are substantially more powerful than what Adobe has outlined in their documentation.
Raymond Camden and Todd Sharp are both keenly aware of this and have started churning out some nice postings which discuss techniques for extending past the canned functionality.
We'll start this off with Raymond's nice post about adding custom renderers to ColdFusion's CFGRID control.
Well imagine you have data being fed into the grid that you do not have control over. For example - perhaps you have price information that isn't formatted nicely. Turns out Ext has a set of built in formatters that you can apply to grid columns, one of them being a money formatter. What if you have some other logic? Maybe you want to flag a price that is lower than 10 dollars? Again, using the Ext API, you can write your own formatter just for this purpose.
Raymond leverages Ext's built-in "usMoney" renderer to format one of the columns in currency format while applying a custom renderer to the second column for more granular control of the data's appearance.
myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4") return "" + data + "";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('data');
cm = mygrid.getColumnModel();
cm.setRenderer(0, Ext.util.Format.usMoney);
cm.setRenderer(1,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
For a quick peak at the end result, take a look at the demo.
Next up, Todd Sharp shows how to easily filter CFGRID results by leveraging the tag's data binding capabilities to dynamically refresh the data via Ajax.
Grids are very nice - especially the new Ajax grid in ColdFusion 8. But they can be a bit difficult to quickly get at something that you may know exists. Here is one method to do filtering.
The code below shows the call to bind the grid with the getSearchString() method which returns the value of the input field:
<cfinput name="searchString" />
<cfinput type="button" name="searchBtn" value="Search" onclick="ColdFusion.Grid.refresh('artGrid', false);" />
<cfgrid
format="html"
name="artGrid"
pagesize="5"
sort="true"
bind="cfc:art.getArt({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}, getSearchString())">
<cfgridcolumn name="artid" header="ID" />
<cfgridcolumn name="artname" header="Name" />
</cfgrid>
The demo for Todd's tutorial can be seen here and the source code is available here.
It's really great to see the ColdFusion community looking past the basic Ajax and UI capabilities built into ColdFusion 8 and actually taking advantage of the horsepower provided under the hood by the Ext framework.
read more at Ajaxian
|
![[info]](http://p-stat.livejournal.com/img/userinfo.gif){kind=small}
vgs_rss's journal