Web Biz

Note:  Get the updated version using Ext 2.

A while back I decided that it would be cool to write an Ext CFC that would perform all most of the interfacing between ColdFusion and the Ext JS library.  This was so long ago, that I don’t even remember when I started working on the project in my free time.   I looked at the created date of the file, and it looks like I started this on April 17, 2007 (which might have been before Adobe announced that CF8’s <CFGRID> was to use the Ext library).  Anyways, a fellow ColdFusion programmer, Isaac Sunkes, was asking about using the Ext library without CF8, which brought back the memories of working on this CFC.  So, without further ado, check out what I started as Ext.CFC:

The Ext library is packed with tons of cool features, but like most CF programmers, I was initially interested in the Grid Panel.  The Grid panel is implemented in ColdFusion 8 using the <CFGRID>, <CFGRIDCOLUMN>, and <CFGRIDROW> tags.  Since I started this long before <CFGRID> was a thought, this code will obviously work in CF7.  However, it should be noted that this code was written prior to the final release of Ext.js version 2 (released today, December 4, 2007); and will only work with Ext version 1.0 to 1.1.1.

So, check out the sample, the CFC overview, and then lets take a look at the code:

[-]View Code COLDFUSION

1 2 3 4 5 6 7 8 9

<cfscript> extobj = createobject("component",extcfc).init(); extobj.initGrid(title="messages",path='http://'&cgi.server_name&cgi.script_name&'?action=getData',root='messages',id='id',defaultSortColumn=form.sort,defaultSortOrder=form.dir); extobj.initGridFooter(); //extobj.setGridCol(header='Subject',width=200,name='subject',render="String.format('<i>{0}</i>', value)",detailRender="String.format('<b>{0}</b><br />{1}', value, record.data['body'])"); extobj.setGridCol(header='Subject',width=200,name='subject'); extobj.setGridCol(header='Sender',width=150,name='sender'); extobj.setGridCol(header='Sent',width=150,name='datetime'); </cfscript>

The code above shows how to create a simple data grid using Ext.CFC.  The first line creates an instance of the Ext.CFC object, and initializes the component.  Next, the initGrid() method is invoked, providing additional parameters for the Grid such as the title to display, the path for the AJAX call to retrieve the result set, the root element in the JSON structure, and more.  The next line, is commented out, but shows some of the other options available when creating columns in the Grid, such as custom rendering of contents in the column.  The last three lines within the <cfscript> block are actually creating the three columns using the setGridCol() method; setting in the title to display (header), the size of the column, and the name of the column in the record set.

If you noticed, I never sent in any data when setting up the grid panel.  This is all performed by Ext (and an underlying JS library if you choose to have it handle your AJAX, DOM manipulation, etc…) behind the scenes.  It calls the path specified in the initGrid() method using AJAX to obtain the record set, which is returned in JSON format.  Because CF7 did not include a JSON serialization function (which CF8 does have), I have included a serialization method in the CFC.

After the grid is all setup within the CFC, its time to actually print out the HTML and JS to the browser, and handle any errors we might have encountered:

[-]View Code COLDFUSION

1 2 3 4 5 6 7 8 9 10 11 12

<cfoutput> <cfif extobj.printGrid()> <!--- success ---> <cfelse> The following errors occured: <ul> <cfloop from="1" to="#arraylen(extobj.errormessages)#" index="i"> <li>#extobj.errormessages[i]#</li> </cfloop> </ul> </cfif> </cfoutput>

Now, lets take a look at the code that returns the data to the grid using an AJAX call:

[-]View Code COLDFUSION

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<cfquery name="users" datasource="blog"> SELECT firstname, lastname FROM users ORDER BY #form.sort# #form.dir# LIMIT #form.limit#<cfif form.start gt 1>, #form.start#</cfif> </cfquery> <cfquery name="usercount" datasource="blog"> SELECT COUNT(lastname) as totalcount FROM users </cfquery> <cfscript> extobj.setGridQuery(users,usercount.totalcount); //clear server output buffer getPageContext().getOut().clearBuffer(); extobj.printJsonData(); </cfscript>

The first query returns all the data, based on the column to sort by and the direction to sort.  The second query obtains the total count of the record set that is going to be paged through.  This is separated into a second query instead of using the recordcount parameter provided by ColdFusion because the first SELECT statement is almost never going to actually return all of the data points (because of the paging performed by the Grid panel).  After both queries, I set the query object into the Ext.CFC object, clear the output buffer (just to make sure we don’t have any whitespace at the top of the page), and print out the JSON representation of the record set.

So, by now (if you’re still reading) you’re probably wondering what the CFC and sample CFM files look like, so go ahead and…

• Download the CFM and CFC in a zip file
• View the CFM as text
• View the Ext.CFC as text
• View complete overview of the CFC using ColdFusion’s component browser
• View the sample implementation

This entry was posted on Tuesday, December 4th, 2007 at 3:50 pm and is filed under ColdFusion 8, Ext, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.