www.crystaltech.com Sucks!
Learning EXT JS with Coldfusion 8 and JSON Conversions
I have just recently started to learn the EXT JS Library. (www.extjs.com).
If you intend on using Coldfusion 8 with EXT JS you will find that changing a query set over to EXT JS JSON will be highly useful. I have found that doing this server side is far easier and faster than using EXT JS Readers to transform the data on the client side. A well written cfc will cost between 3-10 ms on the server side. The EXT JS readers are considerably slower and significantly more difficult to implement.
Because of web blog restrictions I had to change script to _script. You will need to change this back before you test the sample code.
========== Here is the HTML PAGE:================
<html>
<head>
<title>combo_Server</title>
<!--- Get all needed ext libraries files --->
<link rel="stylesheet" type="text/css" href="../../lib3/extjs/resources/css/ext-all.css">
<_script src="lib/extjs/adapter/ext/ext-base.js"></script>
<_script src="lib/extjs/ext-all-debug.js"></script>
<_script src="combo_server2.js"></script>
</head>
<body>
</body>
</html>
<head>
<title>combo_Server</title>
<!--- Get all needed ext libraries files --->
<link rel="stylesheet" type="text/css" href="../../lib3/extjs/resources/css/ext-all.css">
<_script src="lib/extjs/adapter/ext/ext-base.js"></script>
<_script src="lib/extjs/ext-all-debug.js"></script>
<_script src="combo_server2.js"></script>
</head>
<body>
</body>
</html>
============= combo_server2.js =================
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
//This is our JSON record set which defines what kind of data will be present in the JSON passed back from our component.
var users = Ext.data.Record.create([
{name:'ID',type:'int'},
{name:'GENRE_NAME',type:'string'},
{name:'SORT_ORDER',type:'string'}
])
// create the Data Store
var store = new Ext.data.JsonStore({
root:'ROWS',
url:'Chapter3Example.cfc',
remoteSort:true,
baseParams:{method: 'getGenres',returnFormat: 'JSON',start: '1',limit: '50'},
fields:users,
listeners: {
load:{fn: testStore},
loadexception: {fn: loadFailedReport}
}
});
// trigger the data store load
store.load();
//Display the combobox in a form panel
new Ext.FormPanel({
url: 'movie-form-submit.cfm',
renderTo: document.body,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Movie Genres:',
mode: 'local',
store: store,
displayField:'GENRE_NAME',
valueField: 'ID',
width: 130,
triggerAction: 'all',
emptyText: 'Select a state...'
}]
});
//This function will be called on a succesful load, it can be used for debugging or perform on load events.
function testStore(st,recs,opts){
console.info('Store count = ', store.getCount());
}
function loadFailedReport() {
console.log(arguments);
console.info("Response Text?"+response.responseText);
console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
}
});//onReady
================= The CFC to simulate the Data query set: Chapter3Example.cfc
==================
<cfcomponent output="false">
<cffunction name="getGenres" access="remote" output="false" returntype="any" returnformat="json">
<cfargument name="id" type="numeric" required="false" />
<cfset var output = "" />
<cfset var q = "" />
<cftry>
<cfscript>
q = QueryNew("id,genre_name,sort_order");
QueryAddRow(q,3);
QuerySetCell(q,"id",1,1);
QuerySetCell(q,"genre_name","Comedy",1);
QuerySetCell(q,"sort_order",0,1);
QuerySetCell(q,"id",2,2);
QuerySetCell(q,"genre_name","Drama",2);
QuerySetCell(q,"sort_order",1,2);
QuerySetCell(q,"id",3,3);
QuerySetCell(q,"genre_name","Mystery",3);
QuerySetCell(q,"sort_order",2,3);
//format the query for ExtJS json
compObj = CreateObject("component", "CF_EXTJS");
extjs_jsonVar = compObj.qry2json(q);
</cfscript>
<cfcatch type="database">
<cfset q="Data Set Creation Error.">
</cfcatch>
</cftry>
<cfreturn extjs_jsonVar />
</cffunction>
</cfcomponent>
=================== CFC to convert a Coldfusion query set to an EXT JS json response. ===========
<cfcomponent>
<cffunction name="qry2json" access="public" returntype="any">
<cfargument name="querySet" type="query" required="yes">
<cfargument name="startRow" type="numeric" default="1" required="No">
<cfargument name="numberOfRows" type="numeric" default="50" required="No">
<cfset thisQueryName = arguments.querySet>
<cfset endRow = arguments.startRow + (arguments.numberOfRows-1)>
<cfset i = 1>
<cfset thisColumnList = querySet.columnList><!---get a list of all the column names from the query--->
<cfloop query="querySet" startrow="#arguments.startRow#" endrow="#variables.endRow#"><!---loop through each row in the record set--->
<cfset stcUsers = StructNew()><!---create an empty struct (clears for each loop)--->
<cfloop index="columnName" list="#thisColumnList#" delimiters=","><!---populate the struct with the data in the row--->
<cfset "stcUsers.#columnName#" = evaluate("querySet."&columnName)>
</cfloop>
<cfset arrUsers[i] = stcUsers><!---load the row data stuct into an array--->
<cfset i = i + 1><!---increment the array counter--->
</cfloop>
<!--- Format the JSON for EXT JS --->
<cfset stcReturn = {rows=arrUsers,dataset=querySet.RecordCount, startRow = Arguments.startRow, endRow=numberOfRows }>
<cfreturn stcReturn>
</cffunction>
</cfcomponent>
I apologize that I don't have more time to explain all the details, but I assure if you take a little time to recreate this working example, you will start to see the simplicity (and speed) of this solution.
Take care! Steven Benjamin
