I will be giving a brief presentation at the local ColdFusion User Group meeting tomorrow on my Ext.CFC that implements the basic features of ColdFusion 8’s <CFGRID> and associated tags.  After releasing the inital CFC I began working on upgrading to the implementation to using the latest Ext 2.x - which required some minor changes.  I have also completed the basic implementation of an editable grid, but want to finish the rest of the form controls available.  So, here is the Ext.CFC upgraded to Ext 2.x with grouping ability.

Overview of Ext.CFC

  • Implements the Ext GridPanel using Ext 2.x,
  • Abstracts the Ext code - making it simple to use.
  • Ability to utilize <cfgrid> like magic without CF8.
  • Other great Ext projects to check out: cfExt by Dan Vega, and coldExt by Justin Carter.

Limitations

  • Editable grid is still a work-in-progress.
  • Only get the equivalent of a URL bind expression in <cfgrid> - not able to bind data to other resources including CFC and JS Objects.
  • Must have <= CF MX to use CFCs.

Implementation

The way you use the new Ext.CFC is very much the same as before.  First, you need to include the necessary JavaScript files including your adapter of choice.  Second, initialize the component and setup the necessary settings.  Most of the setting are optional, but you need to specify the title of the grid, the path for the Ajax call to return the data, and the primary key column (id) for each row in the grid.  You can also include the default footer and set the name of the column to group by:

?View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<cfscript>
  //initialize the Component
  extobj = createobject("component",extcfc).init('/js/ext-2.0');
  //Set the initial grid settings
  extobj.initGrid(title="Sample Users",path='http://'&cgi.server_name&cgi.script_name &
    '?action=getData',root='users',id='id',defaultSortColumn=form.sort,defaultSortOrder=form.dir,detailedView=true);
  //initialize the default grid footer
  extobj.initGridFooter();
 
  //set each column
  extobj.setGridCol(header='Department',width=200,name='department');
  extobj.setGridCol(header='First name',width=200,name='firstname');
  extobj.setGridCol(header='Last name',width=150,name='lastname');
 
  //set grouping if you want
  extobj.setGridGrouping('department');
 
  //add details row
  extobj.setGridRowBody('address');
</cfscript>

Ouput the grid

Simple call the printGrid() method, and all the necessary Ext JavaScript code is generated and output to the browser:

?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>


Return the data

This is the code that is returned to the gridPanel after calling the path specified in the initGrid() method.  Here we are simply selecting the data from MySQL, and then setting the query object into Ext.CFC using the setGridQuery() method.  Lastly, I clear ColdFusion’s output buffer to get rid of any leading whitespace that might have been generated, and print the grid data using JSON format using the built-in JSON functions. 

?View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

See the demo

Check out a demo using some sample data using Ext.CFC with Ext 2.0.2.

Download

Note: I am still including a function I obtained from cflib to serialize ColdFusion objects into JSON instead of the CF 8 built-in serializeJSON() function to allow the component to be used by those without CF 8.

This entry was posted on Monday, March 10th, 2008 at 9:09 pm.
Categories: ColdFusion, ColdFusion 8, Ext, Web2.0.

No Comments, Comment or Ping

Reply to “Ext.CFC grid on Ext 2.x”