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:
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).
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.
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 1The 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.
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.
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">
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.
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.
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".
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:
<cftree name="treeTest" height="400" width="200" format="html">
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.
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.
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:
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.
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.
No recent entries.