/*!
* 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'}
])
ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9
])
// 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',
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
},{
ColdFusion RIA: ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9
header: "Contact",
dataIndex: 'PHONE',
width: 100,
hidden: false,
sortable: true
}],
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 50,
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
)
