Wish List

Search

RSS

Enter your email address to subscribe to this blog.

EXT Ajax Grid Part 2

Posted At : July 9, 2007 4:25 PM | Posted By : Gary Gilbert
Related Categories: Examples,Coldfusion,Javascript,EXT,Ajax

This is the second installment of building an Ajax grid using the EXT UI and Coldfusion.

In Part 1 we included the library files and set up the Javascript and HTML to render our Grid with paging.

In this entry we will set up an Ajax wrapper component and a component to populate our grid.

We need an Ajax wrapper component in this example because we are not using Coldfusion 8, the Ajax component will act as an intermediary component to instantiate our component and output the results. We could also use a standard cfm page but I prefer to use a component.

ajaxwrapper.cfc

<cffunction name="getFiles" access="remote" output="yes">
   <cfargument name="start" default="1" required="yes"/>
   <cfargument name="limit" default="10" required="yes"/>
   <cfargument name="sort" default="" required="yes"/>
   <cfargument name="dir" default="" required="yes"/>
   <cfargument name="callback" default="" required="no"/>

      <cfif start eq 0>
         <cfset start = 1>
      </cfif>
      <cfset obj = createobject("component","fileExplorer")/>
      <cfset retval = obj.getFilesExt(start,limit,sort,dir,"/dev/crucial")/>
      <cfoutput>#callback##retval#</cfoutput>

</cffunction>

We set the access to remote and also the output attribute to yes. Normally we would set output to no and just return the results to the caller unfortunately with earlier versions of Coldfusion with access="remote" we would end up returning a WDDX packet or equally bad an escapped string which the data reader just doesn't like.

The function getFilesExt in our fileExplorer component looks like this:

<cffunction name="getfilesEXT" access="public" returntype="string" output="false">
   <cfargument name="start" type="numeric" required="yes"/>
   <cfargument name="limit" type="numeric" required="yes"/>
   <cfargument name="sort" type="string" required="yes"/>
   <cfargument name="Direction" type="string" required="yes"/>
   <cfargument name="path" type="string" required="false" default="/"/>


   <cfdirectory action="list" directory="#expandpath('#path#')#" name="files"/>


   <cfquery name="getFiles" dbtype="query" >
      select *
      from files
      where type='File'
      <cfif sort neq ''>
      order by [#sort#] #direction#
      </cfif>
   </cfquery>

   <cfset sJson = '{"recordcount":#getfiles.recordcount#,"columnlist":"datelastmodified,directory,name,size","data":['/>

   <cfoutput query="getFiles" startrow="#start#" maxrows="#limit#">
      <cfset sJson = sJson & '{"datelastmodified":"#dateformat(datelastmodified,"medium")#",'/>
      <cfset sJson = sJson & '"directory":"#JSStringFormat(webpath)#",'/>
      <cfset sJson = sJson & '"name":"#JSStringFormat(name)#",'/>
      <cfset sJson = sJson & '"size":#size#}'/>
      <cfif getfiles.currentrow neq (start+limit)>
         <cfset sJson=sJson &","/>
      </cfif>
   </cfoutput>
   <cfset sJson = sJson & "]}"/>

         <cfreturn sJson/>
</cffunction>

When we set up our grid we specified the default sort order to be the datelastmodified column. When we click on an arrow in the paging toolbar the grid submits to the datastore the following attributes.

In case you are wondering why I put the square "[" brackets around the sort argument it is because Coldfusion 6.1 barfs on the column name "size"

dir   DESC
limit   10
sort   datelastmodified
start   0

We therefore needed those attributes in our ajaxwrapper as well as in our getfilesEXT function. The attributes allow us to set up our sort order as well as specify what our startrow is and how many records we should return.

If you inspect the Coldfusion 8 grid you will notice that it posts very similar information just named slightly different.

When you click on one of the columns the Grid once again sends a post to our component which will return the records in the order specified.

A note on Sorting: We set remoteSort: true when we set up the grid, that means that the sorting of the records is done on the server side, which also means that the entire result set is sorted not just the page you are on. If you want only the page you are on to sort you need to set remoteSort=false.

In the next installment we will look a little closer at the Javascript we used to set up our Grid.

Again you can see it in action here

Until then, Happy Coding...