danvega.org: ColdFusion 9 Ajax Components powered by Ext 3.0+

ColdFusion 9 Ajax Components powered by Ext 3.0+

Monday July 13, 2009 3:25 PM

Word Count: 1064

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.

3517 Views

Comments

#1 Posted By: Steve Withington Posted 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 Posted By: Dan Vega Posted On: 7/13/09 4:51 PM |

Author Comment

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 Posted By: Mike Schierberl Posted 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 Posted By: Dan Posted On: 7/13/09 11:10 PM |

Author Comment

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 Posted By: Evagoras Charalambous Posted 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 Posted By: Chandrakanta Behera Posted On: 9/4/09 3:05 AM

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

#7 Posted By: Reinhard Jung Posted 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 Posted By: Jane Carter Posted 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.

ColdFusion 9 Ajax Components powered by Ext 3.0+

Comments

Post Your Comment

Navigation

Tagcloud

Archives

Blogs I Read

Recent Entries

Recent Comments

About

Stay Upated