View the example
Download the File
the basis of what they want to do is rather easy, but the error handling in cfform when the format is flash, is SOOOOO HARD TOOO DEBUG!

1. Call the setUp() function in the onload=”setUp();” in the beginning form tag that your going to create further into the lesson.

<cfform name=“Performance”
timeout=“500″ height=“800″ width=“800″
format=“flash” skin=“haloSilver”
action=“action.cfm” method=“post”
onload=“setUp();”>

2. Create a cfformitem type=”script” right under the cfform tag and create your setUp function as well as another function we are going to call, when one of your select boxes change.

<cfformitem type=“script”>
public function setUp():Void{
School.enabled = false;
}
public function changeStatus(status):Void{
if (Title.selectedItem.data == 1){
   //this is case sensitive so be careful
School.enabled = status;
}
}
</cfformitem>

3. Create Your two cfselects, and call the changeStatus() function in the onChange=”" event of the first one.

<cfselect name=“Title”
label=“Title” width=“200″
tooltip=“Please enter appropiate title.”
required=“Yes” onChange=“changeStatus(true)” >

<option>Select</option>
<option value = “0″>
Asso. & Asst. Deans
</option>
<option value = “1″>
Asso. & Asst. Provost & VPs
</option>
<option value = “2″>
Campus Directors
</option>
</cfselect>

<cfselect name=“School” width=“200″ required=“Yes” >

<option>
Select
</option>
<option value=“1″>
Dyson
</option>
<option value =“2″>
Education
</option>

</cfselect>

</form>

Hope this helps… take a look at the example.

The following example shows how to use cfform format=”flash” and make a datefield a preselected Date… it’s such a simple example… i’m not quite sure why i should even blog it, but you never know who might need it.

View Example

Download Example

<cfform
name=“myForm”
format=“flash”
width=“350″ height=“250″>

<cfinput name=“startDate” type=“datefield”
label=“date:” mask=“mm/dd/yyyy” value=“03/06/1983″
/>

</cfform>

I always get scared that asfusions blog isn’t going to be available, one day i went there, and the blog and examples part was totally gone, i was freaking out, i go there as a reference all the time… Here is a function i use alot, and so i’m going to blog it as well as it is available on asfusion.com

when i get some time i’ll see if this code works, sometimes when copying and pasting the code into this blogger software i use… some lines dont go in right… but i know it works, because i use it on… beta.killtheheart.com

function applyFilter( term:String, grid:mx.controls.DataGrid, columns:Array ):Void {

var filterTerm:String = term.toString().toLowerCase();

if(filterTerm.length > 0) {
if(_global.unfilteredData[grid.id] == undefined){
if (_global.unfilteredData == undefined){
_global.unfilteredData = {};
}
_global.unfilteredData[grid.id] = grid.dataProvider.slice(0);
}

var filteredData:Array = [];

for(var i = 0; i< _global.unfilteredData[grid.id].length; i++) {
var item:Object = _global.unfilteredData[grid.id][i];
var added:Boolean = false;

for(var j = 0; j< columns.length; j++){
if(!added){
var value:String = item[columns[j]].toString().toLowerCase();
if(value.indexOf(filterTerm) != -1) {
filteredData.push(item);
added = true;
}
}
else {
break;
}
}
}

grid.dataProvider = filteredData;

}
else {
if(_global.unfilteredData[grid.id] != undefined) grid.dataProvider = _global.unfilteredData[grid.id];
}
}

<cfif parameterExists(form.submit_btn)>
<CFDUMP var=“#form#”>
</cfif>

<cfform format=“Flash” skin=“haloSilver” width=“400″ height=“300″>

<cfsaveContent variable=“onLoad”>
function(){
_level0.myGrid.rowHeight=25;

//applying the cellRenderer ‘GridRenderer.as’ to the 4th column _level0.myGrid.getColumnAt(3).cellRenderer = GridRenderer;

}.call()
</cfsavecontent>

<!— grid with 3 columns name, firstName, department —>
<cfgrid name=“myGrid”>
<cfgridColumn name=“name”>
<cfgridColumn name=“firstName”>
<cfgridColumn name=“department”>

<cfgridrow data=“Maegerman, Philippe, 1“>
<cfgridrow data=“Fonda, Nahuel, 2“>
</cfgrid>

<cfinput type=“submit” name=“submit_btn” value=“Submit to see the form dump”>
<!— onLoad trigger —>
<cfinput type=“text” visible=“No” width=“0″ height=“0″ name=“trigger2″ bind=“{1==2?”:#onLoad#}”>

</cfform>

and here is the actionscript file that is needed, put them in the same directory, and it will work.

GridRenderer.as
——————-

import mx.controls.ComboBox;

class GridRenderer extends mx.core.UIComponent{

var combo;
var listOwner : MovieClip;
var getCellIndex : Function;
var getDataLabel : Function;

function createChildren(Void) : Void{
combo = createClassObject( ComboBox, “combo”, 1, {owner:this});
combo.dataProvider = [{data:1,label:'CF_Pim'}, {data:2,label:'AsFusion'}];
combo.addEventListener(“change”, this);
}

function getPreferredHeight(Void) : Number{
return combo != undefined ? 25:0;
}

function setValue(str:String, item:Object){
var val = item.department;
for(var i = 0; i < combo.dataProvider.length; i++){
combo.dataProvider[i].data == val ? combo.selectedIndex = i : ”;
}
}

function change() {
listOwner.editField(getCellIndex().itemIndex,
getDataLabel(), combo.selectedItem.data);
}
}

View the example

we ran into a situation where the flash form got so big on the page, that we had to use javascript to scroll to the top of the page…

View The example

Download the files

<cfsavecontent variable=“doThis”>
getURL(“javascript:showMessage(“ + “‘test’” + “)”);
</cfsavecontent>
<script language=“javascript”>
function showMessage(msg)
{
alert(msg);
}

</script>

<cfform name=“myform” height=“200″ width=“200″ format=“Flash”>
<cfinput type=“button” name=“test” value=“test” onClick=“#doThis#”>
</cfform>

I use it on my site to invoke javascript and ajax

View the example

asfusion Looping over records of a large gridI slightly modified thier code

<cfif isDefined(‘form’)>
<cfdump var=“#form#”>
</cfif>
<!— replace this cfscript by your query: <cfquery name=“products”> —>
<cfscript>
//generate a large query
products = queryNew(“”);
names = “”;
prices = “”;
for (i = 1; i LTE 25; i = i + 1){
names = listappend(names,“Product “ & i,“,”);
prices = listappend(prices,100 + i,“,”);
}
queryaddcolumn(products,“name”,listtoarray(names));
queryaddcolumn(products,“price”,listtoarray(prices));
</cfscript>

<cfsavecontent variable=“changePrice”>
var i = 0;
updateBtn.enabled = false;

//make the loop with onEnterFrame instead of a “for”
_root.onEnterFrame = function ()
{
if(i < productsGrid.length) {
//do one iteration of the loop
_root.updatePrice(i);
i++;
}
else {
//end the loop
_root.onEnterFrame = undefined;
updateBtn.enabled = true;
}
}

//the function that does whatever we need in each iteration
_root.updatePrice = function (index){
productsGrid.editField(index, ‘price’, Number(productsGrid.getItemAt(index)['price']));
productsGrid.setPropertiesAt(index, {backgroundColor:0xF7FFB7});
}
</cfsavecontent>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“> <html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″>
<title>Looping over a large cfgrid</title>
</head>
<body >
<cfform name=“myForm” format=“flash” width=“350″ height=“250″>
<cfformitem type=“text”>Click Update then submit the form.</cfformitem>
<cfformgroup type=“vBox”>
<cfgrid name= “productsGrid” query=“products” height=“150″ rowheaders=“false”>
<cfgridcolumn name=“name” header=“Product”>
<cfgridcolumn name=“price” header=“Price” type=“numeric”>
</cfgrid>
<cfformgroup type=“horizontal” style=“horizontalAlign:right;”>
<cfinput type=“button” name=“updateBtn” value=“Update” onclick=“#changePrice#”>

<cfinput type=“submit” name=“submit” value=“submit”>
</cfformgroup>
</cfformgroup>
</cfform>
</body>
</html>

Keep in mind it’s a work around so the code probably won’t work with the next version

THIS WILL SUCK IF YOU ARE ENTERING OR UPDATING MORE THAN A FEW HUNDRED RECORDS or updating a lot of columns…