Dan Vega: ColdFusion 9 Ajax Components powered by Ext 3.0+

If you have not heard the ExtJS library that ships with ColdFusion will be upgraded in ColdFusion 9. It will at least (and currently running on) be version 3.0 but may even be at 3.1. The reason for this is that Adobe has signed an exclusive agreement with Ext that gives their engineers direct access to the latest builds. I have a bunch of demos that we will get to but lets just take a look at 2.

The first is just a basic grid demo. The only reason I wanted to show this off is for the look. You can see by the screen shot below that the default look of the grid has a nice look and feel to it. I added the row selection color to make it more like Ext but as you can see its a very clean look. <cfquery name="listAuthors" datasource="cfbookclub"> SELECT * FROM AUTHORS ORDER BY lastname </cfquery> <html> <head> <title>Basic Grid Demo</title> <style>body{padding:20px;}</style> </head> <body> <h1>Author Listing</h1> <cfform> <cfgrid name="AuthorsGrid" format="html" query="listAuthors" stripeRows="true" selectcolor="##D9E8FB"> <cfgridcolumn name="authorId" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="isspotlight" header="Is Spotlight"> </cfgrid> </cfform> </body> </html>

Next up is the message box demo. I love the Ext.MessageBox class as it gives you a nice / clean / easy way to display messages. That is right, please stop using alert boxes :) You can actually go about this 2 different ways and I will show you both. 1st you can create the message box using the new cfmessagebox tag, giving it an id and simply showing the message box by passing in its name. Also remember that we have to pull in that tag to use it by using cfajaximport <cfajaximport tags="cfmessagebox"/> <html> <head> <title>Message Box Demo</title> <invalidTag> function init(){ var grid = ColdFusion.Grid.getGridObject("ArtistGrid"); grid.addListener("rowclick",onRowClick); } function onRowClick(g,rowIndex,e){ ColdFusion.MessageBox.show("mymb"); } </script> <style>body{padding:20px}</style> </head> <body> <cfquery name="getArtists" datasource="cfartgallery"> SELECT artistId, firstname, lastname, address, city, state, postalcode, email FROM Artists </cfquery> <cfset args = structNew()> <cfset args.name = "ArtistGrid"> <cfset args.format = "html"> <cfset args.query = "getArtists"> <cfset args.stripeRows = true> <cfset args.selectColor = "##D9E8FB"> <cfset args.width = 600> <h1>Artists Grid</h1> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" header="Email Address"> <cfgridcolumn name="address" header="Address"> <cfgridcolumn name="city" header="City"> <cfgridcolumn name="state" header="State"> <cfgridcolumn name="postalcode" header="Zip"> </cfgrid> </cfform> <cfmessagebox name="mymb" type="alert" message="This message box rocks" labelOK="OK" labelCANCEL="Cancel this"/> <cfset ajaxOnLoad("init")> </body> </html> You could also simply access the Ext.Message box class directly since it is already loaded. If you look at the docs the alert box will take 2 paramaters, the message box title and the message. <html> <head> <title>Message Box Demo</title> <invalidTag> function init(){ var grid = ColdFusion.Grid.getGridObject("ArtistGrid"); grid.addListener("rowclick",onRowClick); } function onRowClick(g,rowIndex,e){ Ext.Msg.alert("Hello Msg Box","You clicked on row number " + rowIndex); } </script> <style>body{padding:20px}</style> </head> <body> <cfquery name="getArtists" datasource="cfartgallery"> SELECT artistId, firstname, lastname, address, city, state, postalcode, email FROM Artists </cfquery> <cfset args = structNew()> <cfset args.name = "ArtistGrid"> <cfset args.format = "html"> <cfset args.query = "getArtists"> <cfset args.stripeRows = true> <cfset args.selectColor = "##D9E8FB"> <cfset args.width = 600> <h1>Artists Grid</h1> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" header="Email Address"> <cfgridcolumn name="address" header="Address"> <cfgridcolumn name="city" header="City"> <cfgridcolumn name="state" header="State"> <cfgridcolumn name="postalcode" header="Zip"> </cfgrid> </cfform> <cfset ajaxOnLoad("init")> </body> </html>

All I really wanted to do was point out here that that Ext has been updated and its going to give us a ton of options. The current release of Ext is by far leaps and bounds above the 1.1 library so this is going to be a welcomed upgrade. I should have some more detailed posts in the near future about all of the ajax upgrades.

This entry was posted on July 13, 2009 at 4:25 PM and has received 10429 views. Comments 9 | Print this entry.

#1 by Steve Withington on 7/13/09 - 4:09 PM

so ... have they been able to reduce the weight of using ExtJS? i really like using tags like CFGrid, etc. but have mainly kept the usage to back-end areas due to the bloated file sizes, etc.

#2 by Dan Vega on 7/13/09 - 4:51 PM

No and you right on Steve. I am going to devote an article to this because I think most people are on the same page as us.

#3 by Mike Schierberl on 7/13/09 - 11:02 PM

Does anyone know how the ExtJS license applies in this case? Unless Adobe has a special agreement it seems like the Ext dual-license would still be in effect which is GPL by default.

#4 by Dan on 7/13/09 - 11:10 PM

Adobe has to have special licensing for this. There is no way you would write ColdFusion applications that needed fall under the GPL. If someone can clarify this that would be great but I would say have at it!

#5 by Evagoras Charalambous on 7/14/09 - 4:36 AM

I think Adobe should take a look at what Justin Carter has done with his ColdExt project. It's truly owesome and in my opinion much easier to unerstand and use than Adobe's implementation of ExtJs.

#6 by Chandrakanta Behera on 9/4/09 - 3:05 AM

What is <invalidtag> and is it a part of coldfusion 9 ?

#7 by Reinhard Jung on 11/26/09 - 3:44 AM

Hi Dan

I got cf9 and Apache running, but i can't run your sample code :-( has it something to do with cfajaximport? How can i test it?

thanx a lot
reinhard

#8 by Jane Carter on 12/4/09 - 1:17 PM

We were thinking of going with jqgrid rather than cfgrid because the latter apparently gets too slow when there is a lot of data. I was wondering if anyone has any specific information about this. Thanks.

#9 by Guillermo Dewey on 8/18/11 - 8:18 PM

has anyone upgrade the ext 3.1 to 3.3 on coldfusion 9 to see if the cfajax tags still work?

Navigation

Search

Tags

Archives by Subject

Subscribe

Recent Comments

Blog Roll

ColdFusion 9 Ajax Components powered by Ext 3.0+

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)