ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9

ballscauliflowerΛογισμικό & κατασκευή λογ/κού

30 Ιουν 2012 (πριν από 5 χρόνια και 3 μήνες)

518 εμφανίσεις

ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9
Posted At : July 13, 2009 11:14 AM | Posted By : Kumar
Related Categories: Web Development, ColdFusion 9, Ajax, ColdFusion 8, ExtJS
With the recent release of
ExtJS 3.0
, I have been looking at the library again. I decided to do a simple Grid
implementation using ExtJS. ExtJS is probably one of the best looking JS libraries out there out of the box and
when implemented its extremely quick. The main issue as has been when integrading jQuery with ColdFusion was
passing the JSON back in the proper format for the grid.
Have a look at the Demo First
Here
.
And now lets look at the code.
The HTML is very simple. We include the Ext libraries and also the paging.js file which contains out Javascript for
the Grid.
<html>
<head>
<title>Ext JS Grid with ColdFusion</title>
<!--- Get all needed ext libraries files --->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script src="ext/adapter/ext/ext-base.js"></script>
<InvalidTag src="ext/ext-all-debug.js"></script>

<InvalidTag src="paging.js"></script>

</head>
<body>
<!--- This will be out grid div --->
<div id="topic-grid"></div>

</body>
</html>
Now lets look at the javascript.
/*!
* 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 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());
}

//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:'FIRSTNAME',type:'string'},
{name:'LASTNAME',type:'string'},
{name:'DISPLAYNAME',type:'string'},
{name:'USERNAME',type:'string'},
{name:'USERACCOUNTINGCODE',type:'string'},
{name:'PHONE',type:'string'}
])

// create the Data Store
var store = new Ext.data.JsonStore({
totalProperty:'DATASET',//This is how many total records are there in the set.
root:'ROWS',//The Root of the data.
url:'http://coldfusion-ria.com/Blog/KSPersonal/getStuff.cfc',//Where we get it from
remoteSort:true,//We will sort server side
//Base Params are parameters passed in during the first call
baseParams:{
method: 'getStuffA',
ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9
method: 'getStuffA',
returnFormat: 'JSON',
start: '0',
limit: '50'
},
//We define the JSON Reader for the data. We also need to set the totalProperty, root and idProperty for the dataset here.
reader: new Ext.data.JsonReader({
totalProperty:'DATASET',
root:'ROWS',
idProperty:'ID'
},users
),
//Fields read in
fields: [
'ID','FIRSTNAME','LASTNAME','DISPLAYNAME','USERNAME','USERACCOUNTINGCODE','PHONE'
],
//We specify the listeners to be called during load or another one during loadexception. good for debugging purposes.
listeners: {
load:{
fn: testStore
},
loadexception: {
fn: function() {
//console.log(arguments);
//console.info("Response Text?"+response.responseText);
//console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
}
}
}
});
//We setup the Grid
var grid = new Ext.grid.GridPanel({
width:750,
height:500,
title:'Users',
store: store,
trackMouseOver:true,
disableSelection:false,
loadMask: true,
stripRows: true,
collapsible: true,
// grid columns
columns:[
new Ext.grid.RowNumberer(),//This will do numbering on the grid for us
{
id: 'users',
header: "First Name",
dataIndex: 'FIRSTNAME',
width: 125,
hidden:false,
sortable: true
},{
header: "Last Name",
dataIndex: 'LASTNAME',
width: 125,
hidden: false,
sortable: true
},{
header: "Display Name",
dataIndex: 'DISPLAYNAME',
width: 200,
hidden: false,
sortable: true
},{
header: "User Name",
dataIndex: 'USERNAME',
width: 125,
hidden: false,
sortable: true
},{
header: "Contact",
dataIndex: 'PHONE',
width: 100,
hidden: false,
sortable: true
}],
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 50,
ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9
store: store,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No Records to display"
})
});

//Default Sort set for the grid load call
store.setDefaultSort('FIRSTNAME','ASC');
// render it
grid.render('topic-grid');
// trigger the data store load
store.load();
});
The comments explain what I am mainly doing in the script. The basic process is as follows:
Create the Data Record that will be the specification for the JSON Reader
1.
Create the JSON Store and point to the JSON Reader to our record we created
2.
Create the Grid, point the store to the JSON Store we created
3.
Create the Paging Toolbar for paging implementation
4.
Next, lets look at our CFC.
<cfcomponent output="false">

<cffunction name="getStuffA" access="remote" returnFormat="json" output="false">
<cfargument name="limit" default="50">
<cfargument name="start" default="1">
<cfargument name="sort" default="FirstName">
<cfargument name="dir" default="ASC">

<cfset var arrUsers = ArrayNew(1)>

<!--- ExtJS starts the dataset at 0, we increment it by 1 to get proper start and end rows --->
<cfset Arguments.start = Arguments.start + 1>

<cfquery name="selUsers" datasource="RIADemo">
SELECT
ID, FirstName, LastName, DisplayName, UserName, UserAccountingCode, Phone
FROM
Users
ORDER BY #Arguments.sort# #Arguments.dir#
</cfquery>

<!--- For the Array --->
<cfset i = 1>

<!--- Get the end record --->
<cfset end = ((Arguments.start) + arguments.limit)-1>

<!--- We look through the query and create our JSON return set. The ExtJS JSON return has to be in the format like:
{
results: 2, // Reader's configured totalProperty
rows: [ // Reader's configured root
{ id: 1, firstname: 'Bill', occupation: 'Gardener' }, // a row object
{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' } // another row object
]
}
This means that the data is returned as an array of objects (in our case structures). So we build that array.
--->
<cfloop query="selUsers" startrow="#Arguments.start#" endrow="#end#">
<cfset stcUsers = StructNew()>
<cfset stcUsers.ID = #selUsers.ID#>
<cfset stcUsers.FIRSTNAME = #FirstName#>
<cfset stcUsers.LASTNAME = #LastName#>
<cfset stcUsers.DISPLAYNAME = #DisplayName#>
<cfset stcUsers.USERNAME = #UserName#>
<cfset stcUsers.USERACCOUNTINGCODE = #UserAccountingCode#>
<cfset stcUsers.PHONE = #Phone#>
<cfset arrUsers[i] = stcUsers>
<cfset i = i + 1>
</cfloop>

ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9

<!--- Final JSON return --->
<cfset stcReturn = {rows=arrUsers,dataset=#selUsers.RecordCount#}>

<cfreturn stcReturn>

</cffunction>
</cfcomponent>
The main thing in the CFC is getting the proper JSON structure for the ExtJS Grid. This is easy when you
understand that the grid data is expected to be in the format of an Array of Objects(Structures).
Source Code:
Download
Update
: This will also work with ColdFusion 9 and ExtJS 3.0
ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9