JSON, EXT 2 and ColdFusion

April 18, 2008

Someone asked for an example of my post on JSON, jQuery and ColdFusion using the EXT JS 2 library. I've never used EXT JS before but thought I'd give it a go.

CFC (CF8)

<cfcomponent output="false" hint="I return data as CF native JSON">
  <cffunction name="GetProducts" output="false" access="remote">
    
    <cfset var qryExample = QueryNew("id,title") />
    <cfset var ndx = "" />
    
    <cfloop from="1" to="2" index="ndx">
      <cfset QueryAddRow(qryExample) />
    
      <cfset QuerySetCell(qryExample, "id", ndx) />
      <cfset QuerySetCell(qryExample, "title", RepeatString(Chr(64 + ndx), 3)) /> 
    </cfloop>			

    <cfreturn qryExample />

  </cffunction>
</cfcomponent>

Reading ColdFusion JSON with EXT JS 2.

<script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
function GetProducts(){
  Ext.Ajax.request({
    url: 'http://mydomain/webservice.cfc?wsdl&queryformat=column',
    success: ShowProducts,
    failure: function(){alert('failed to load JSON')},
    params: {
      method: 'GetProducts', returnformat: 'json'
    }
  });
}

function ShowProducts(oJson){
  // matches CF8 implementation of JSON...
  // example: 
  // {"ROWCOUNT":2,"COLUMNS":["ID","TITLE"],"DATA":{"id":[1,2],"title":["AAA","BBB"]}}
  
  // convert json string to an object....
  qProducts = eval("("+oJson.responseText+")");

  if (qProducts.ROWCOUNT==0) {
    alert('Sorry, no matches found');
  }
  else {
    for (var i=0; i<qProducts.ROWCOUNT; i++) {
      // loop through JSON recordset...
      // we can reference the fields like this...
      nId = qProducts.DATA.id[i];
      sTitle = qProducts.DATA.title[i];

      document.write(nId + ':' + sTitle + '<br />');
    }
  }
}
/*]]>*/
</script>

 So, there you go. It's been an interesting exercise and EXT JS has a lot to offer.

2 comments

  1. I'm personally a fan of mootools myself, ext is just really heavy, really bogs down the browser, not quite as lightweight.

    Comment by Mike – April 18, 2008
  2. EXT JS, looks really good for building JS based RIAs. Shame the in-built EXT JSON reader doesn't like the JSON CF produces.

    I personally like jQuery, but it is always worth looking at other frameworks.
    I tend to use JS for enhancements rather than functionality which is why jQuery works well for me. Maybe I'll do a mootools version of this post next! Anyone using prototype?

    Comment by John Whish – April 18, 2008

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.