EXT 2.0 Released

Today marks the official release of EXT JS v2.0. There have been some major improvements as well as additions to this release. A few of the impressive additions/changes include:


EXTJS 2.0 Alpha

For those of you who like the new Ajax tags of Colfusion 8 the framework, ExtJS, has released the Alpha version of their next major release.

This release is a rather large upgrade to the code base that Coldfusion uses and fully separates its reliance or dependence on other frameworks (yahoo ui toolkit for example).

The host of new features are too many to go into here so you can read about the major and exciting new features here. You can also read more about the general release news on their blog.

All I can say is that Jack Slocum and his crew do a fantastic job and I am continually impressed with the quality and level of their work. Add on top of that the three licensing options (open source, oem/reseller, and commercial) and you end up with a product that everyone can use.

An important thing to note is that this release while extensive has not significantly increased the size of the library. The whole library measures in at 522kb (thats everything you need) and it is possible to reduce that size rather significantly by importing only the library files that you need for a specific task. Though that being said the general practice is to include the ext-all.js file and be done with it.

Happy Coding...

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.


Ext Tree adding a Context Menu

In the previous Ext Tree and Coldfusion Example post we set up an EXT treeview bound to a Coldfusion component.

In this example we will be building upon that example to add a dynamic context menu to our tree. The context menu will be populated by calling a function in a Coldfusion component.

Step 1

The first thing we need to do is include the below snippet of code in the head section of our page, but after the ext-all.js.


Ext Tree and Coldfusion Example

The EXT tree is, in my opinion, a much better implementation of a dynamic ajax tree than what the yahoo utility toolkit starts out with, and subsequently what Adobe decided to use for the CFTREE tag. Once again I am really amazed at the quality work that Jack and his crew have done. The tree itself is relatively simple to set up as either a static tree or dynamic tree. In the example code I will be showing I have set up the tree to have a lazy loader. This means that I will only be showing the root (and in this case the first set of children) of the tree and each time a node is clicked a call will be made to populate that nodes children.


Coldfusion 8 Binding a Grid to a Tree

In a previous post I mentioned that I probably wouldn't be using these two tags because they just don't provide me with the flexibility that will allow me to give our customers what they will likely want. But that doesn't completely remove their usefulness, it just reduces it to very specific applications. It still is a good way to demonstrate binding different UI elements together.

As the title states we are going to be binding a tree's select event to a grid. This means that when a user clicks on a node of a tree an Ajax call will be made to repopulate the grid.

Lets pretend for a moment that we have a cfTree named "myTree" in a form called "myTreeForm" and our tree is populated via its own bind call to a cfc that returns directories.

    <cfform name="myTreeForm" >
        <cftree name="myTree" height="400" width="200" format="html">
            <cftreeitem bind="cfc:#request.cfcpath#.fileExplorer.getDirectories({cftreeitempath},{cftreeitemvalue})">

Now lets further pretend that we also have a grid called fileGrid in a form called gridform. This grid could be on the same page, or not, but is also subsequently bound to a method in a component that returns files in a specified directory.


Coldfusion UI Tags? No thanks!

I have been experimenting with the new coldfusion UI tags since the pre-release program some time ago and the more I use them the more I realize that some of them just aren't really all that useful, and the others only marginally so.

I think I will probably get some use out of the CFLAYOUT and CFWINDOW tags but to be quite honest if I need a grid or a tree I will most likely skip over the CF implementations and go with the EXTJS tree and grid. They are a heck of a lot more configurable, I have access to all the functionality offered whereas with the CF versions I am limited to the functionality and init config options that they thought would be most useful.

I could, perhaps, finagle my way to getting what I need using the ColdFusion.Grid.getGridObject and ColdFusion.Tree.getTreeObject, but with the grid being Ext and the tree being a Yahoo widget it isn't the easiest thing to do, especially if I know that if I used the grid as it was first of all I would have what I wanted immediately without the hassle.

Don't get me wrong the Adobe team did a good job of providing us developers with easier methods of integrating Ajax into our applications but in the end I will probably end up writing custom tags that will give me the flexibility that I need.

I hope others find these new UI tags more useful than the old ones, which I can honestly say I never used.

Coldfusion Flash Forms with CFLAYOUT

I've noticed on the Adobe Coldfusion 8 forums that people trying out different combinations of tags together in ways that Adobe probably didn't think of, which is a good thing.

One of the problems that people are having is mixing cfform format="flash" and the new UI tags.

The issue, I think, has something to do with the z-index of flash and the new UI elements. When someone mixes a flash element with any of the new UI elements such as cfmenu or cfwindow it pops up BEHIND the flash element.

To fix this if you are using cfform format="flash" is to also add the attribute wmode="opaque".

Happy Coding...

Coldfusion 8's CFTREE tag

Coldfusion 8 introduced support for an HTML tree. With the HTML tree you can build an AJAX driven tree, which means you only need to load the to level nodes at first and all subsequent child nodes and leaves are only loaded when needed. The old requirements of the cftree tag, that being living inside of a cfform still exists.

You set up your tree like so:

    <cfform name="myform">
        <cftree name="treeTest" height="400" width="200" format="html">
            <cftreeitem bind="cfc:components.tree.getNodes({cftreeitempath},{cftreeitemvalue})">

The bind expression, like in my previous post about the cfgrid, is used to bind the creation of the tree elements to the output of a CFC.


Coldfusion 8's CFGRID

One of the tags to receive an upgrade in CF8 is the CFGRID tag. I can honestly say that I have never had a need to use this tag in the past although for some I can see that it 'could' have been useful.

The added support comes in the form of: type="html",bind,bindOnLoad,pageSize,prefesrbPageOnSort,stripeRows,stripeRowColor.

Lets focus for a minute on the new bind attribute. This attribute allows you to specify an expression to fill the grids contents. This expression can come in three flavors: You can bind directly to a CFC, a javascript function, or additionaly a URL.

The old restriction on the cfgrid is still in place, that being that it has to live within the bounds of a CFFORM tag, that's a small price to pay for ajax functionality right?

So here is a code snippet of the cfgrid in action:


Coldfusion 8 Public Beta

I am really excited about the release of the public beta of Coldfusion 8!

I was fortunate enough to take part in the closed beta testing and the new features that have been included in this release of coldfusion are about as important (in my opinion) as the release from Coldfusion 5 to MX.

A few of the more interesting things are pdf support, new image handling functions, ajax, json, a new cfthread (now this is exciting),an array of new GUI tags based on EXT JS and Yahoo GUI Library: cflayout,cfgrid,cfwindow,cfpod, a new cftree. All of the ajax tags support binding to cfc's as well as javascript functions or to a urls, which means asynchronous data loads.

In my coming entries I will endevor to provide examples of some of the new tags, as well as explore some of the features of Cf8 in more detail.

Powered By Railo


Subscribe via RSS
Follow garyrgilbert on Twitter Follow me on Twitter
Or, Receive daily updates via email.


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.


An Architect's View
Rey Bango

Wish List

My Amazon.com Wish List