PDA

View Full Version : ColdFusion Loading Grid help



Hedge
21 Dec 2009, 1:28 PM
I'm a ColdFusion developer that is a EXT JS newbie. I am basically trying to load a grid from a query created on another page. Here is the CF code.

<CFQUERY NAME="GetCouponPromos" DATASOURCE="#DataSource#">
SELECT ID, Coupon, MoneyOff, PercentageOff, SingleUse, PriceBreak, Starts, Ends FROM Promotions
WHERE (Coupon IS NOT NULL)
ORDER BY ID
</CFQUERY>
<cfset JSONToReturn = SerializeJSON(GetCouponPromos)>
<CFCONTENT TYPE="text/plain" RESET="Yes"><CFOUTPUT>#JSONToReturn#</CFOUTPUT>

And here is my EXT JS code.

<script language="JavaScript" type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../images/spacer.gif';
Ext.QuickTips.init();
var CouponForm = new Ext.FormPanel({
url:'Coupon_Promos_action.cfm',
renderTo: Ext.get('FormDiv'),
frame: true,
title: 'Coupon Promotions',
labelWidth: 175,
labelAlign: 'right',
autowidth: true,
items:[{//display the fields in the form
xtype: 'textfield',
fieldLabel: 'Coupon Code',
name: 'CouponCode',
allowBlank: false,
vtype: 'alphanum',
width:125
},{
xtype: 'checkbox',
fieldLabel: 'Free Shipping',
name: 'FreeShipping'
},{
xtype: 'textfield',
fieldLabel: '% off purchase',
name: 'PercentageOff',
width:40
},{
xtype: 'textfield',
fieldLabel: '$ off purchase',
name: 'MoneyOff',
width:40
},{
xtype: 'textfield',
fieldLabel: 'Minimum purchase required',
name: 'PriceBreak',
width:40
},{
xtype: 'checkbox',
fieldLabel: 'Single Use',
name: 'SingleUse'
},{
xtype: 'datefield',
fieldLabel: 'Valid start date',
allowBlank: false,
name: 'Starts'
},{
xtype: 'datefield',
fieldLabel: 'Valid end date',
allowBlank: false,
name: 'Ends'
}],
buttons:[{
text: 'Reset',
handler: function(){
CouponForm.getForm().reset();
}
},{
text: 'Save',
handler: function(){
CouponForm.getForm().submit({
success: function(f,a){
Ext.Msg.alert('Save Complete', a.result.msg);
CouponForm.getForm().reset();
},
failure: function(f,a){
if (a.failureType === Ext.form.Action.CONNECT_FAILURE){
Ext.Msg.alert('Failure', 'Server reported: '+a.response.status+' '+a.response.statusText);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID){
Ext.Msg.alert('ERROR', a.result.msg);
}
}
});
}
}]
});
});
</script>
<script language="JavaScript" type="text/javascript">
Ext.onReady(function(){
var store = new Ext.data.Store({
url:'coupon_promos_action.cfm?GetCoupons=1',
reader: new Ext.data.JsonReader({
root:'DATA',
id:'ID'
}, [
'ID',
'Coupon',
'MoneyOff',
'PercentageOff',
'SingleUse',
'PriceBreak',
{name: 'Starts', type: 'date', dateFormat: 'Y-m-d'},
{name: 'Ends', type: 'date', dateFormat: 'Y-m-d'}
]),
autoLoad: true
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.get('GridDiv'),
frame: true,
title: 'Coupon Codes',
height:250,
autoWidth: true,
stripeRows: true,
enableColumnMove: true,
store: store,
columns: [ // determine the columns and their attributes
{header: "ID", dataIndex: 'ID', width:20, sortable:true},
{header: "Coupon", dataIndex:'Coupon', width:150, sortable:true},
{header: "$ Off", dataIndex: 'MoneyOff', renderer: Ext.util.Format.usMoney(), width:50, sortable:true},
{header: "% Off", dataIndex: 'PercentageOff', width:50},
{header: "Single Use", dataIndex: 'SingleUse', width:75, sortable:true},
{header: "Price Minimum", dataIndex: 'PriceBreak', renderer: Ext.util.Format.usMoney(), width:100, sortable:true},
{header: "Starts", dataIndex: 'Starts', renderer: Ext.util.Format.dateRenderer('m/d/Y'), width:50, sortable:true},
{header: "Ends", dataIndex: 'Ends', renderer: Ext.util.Format.dateRenderer('m/d/Y'), width:50, sortable:true}
],
sm: new Ext.grid.RowSelectionModel({ //allow a singlerow to beslected
singleSelect: true,
listeners:{
rowselect:{
fn: function(sm,index,record) {
Ext.Msg.alert('You Selected', record.data.title);
}
}
}
})
});
});
</script>

My problem is the grid loads rows but no data in the rows. All the rows are blank. Here is the JSON that ColdFusion returns. What am I missing?

{"COLUMNS":["ID","COUPON","MONEYOFF","PERCENTAGEOFF","SINGLEUSE","PRICEBREAK","STARTS","ENDS"],"DATA":[[104,661845.0,50.0000,0.0000,true,0.0000,"January, 29 2008 00:00:00","January, 29 2009 00:00:00"],[118,715831.0,10.0000,0.0000,true,0.0000,"February, 10 2009 00:00:00","February, 10 2010 00:00:00"],[119,719453.0,60.0000,0.0000,true,0.0000,"February, 24 2009 00:00:00","February, 24 2010 00:00:00"],[124,757709.0,8.9900,0.0000,true,0.0000,"April, 08 2009 00:00:00","April, 08 2010 00:00:00"],[125,759810.0,16.9900,0.0000,true,0.0000,"May, 15 2009 00:00:00","May, 16 2009 00:00:00"],[126,763057.0,14.9900,0.0000,true,0.0000,"May, 28 2009 00:00:00","May, 28 2010 00:00:00"],[127,774804.0,9.9900,0.0000,true,0.0000,"May, 28 2009 00:00:00","May, 28 2010 00:00:00"],[132,778294.0,10.0000,0.0000,true,0.0000,"July, 28 2009 00:00:00","July, 28 2010 00:00:00"],[134,"HOCS824",0.0000,0.2000,false,0.0000,"August, 20 2009 00:00:00","September, 01 2009 00:00:00"],[136,792751.0,4.9900,0.0000,true,0.0000,"September, 21 2009 00:00:00","September, 21 2010 00:00:00"],[138,100109.0,0.0000,0.1000,false,0.0000,"September, 30 2009 00:00:00","October, 15 2009 00:00:00"],[139,"HOTS100209",0.0000,0.1500,false,0.0000,"October, 02 2009 00:00:00","October, 10 2009 00:00:00"],[143,848944.0,100.0000,0.0000,true,0.0000,"October, 02 2009 00:00:00","October, 22 2009 00:00:00"],[144,849065.0,100.0000,0.0000,true,0.0000,"October, 02 2009 00:00:00","October, 10 2009 00:00:00"],[147,871686.0,0.0000,0.0000,true,20.0000,"November, 09 2009 00:00:00","November, 09 2010 00:00:00"],[148,876201.0,6.0000,0.0000,true,0.0000,"November, 17 2009 00:00:00","November, 17 2010 00:00:00"],[149,877551.0,25.0000,0.0000,true,0.0000,"November, 18 2009 00:00:00","November, 18 2010 00:00:00"],[150,"BlackFriday09",0.0000,0.2500,false,0.0000,"November, 26 2009 00:00:00","December, 01 2009 00:00:00"],[151,"Holiday09",0.0000,0.1000,false,0.0000,"December, 01 2009 00:00:00","January, 01 2010 00:00:00"],[153,904922.0,20.0000,0.0000,true,0.0000,"December, 08 2009 00:00:00","December, 08 2010 00:00:00"],[155,908814.0,15.0000,0.0000,true,0.0000,"December, 16 2009 00:00:00","December, 16 2010 00:00:00"],[156,912446.0,25.0000,0.0000,true,0.0000,"December, 18 2009 00:00:00","December, 18 2010 00:00:00"],[157,929027.0,100.0000,0.0000,true,0.0000,"December, 18 2009 00:00:00","December, 18 2010 00:00:00"]]}