Using Ext JS 2.2 Ajax in CF - Part 2 - Combo boxes in the grid.
The real reason I started looking at Ext was my frustration with the Ext based grid control in ColdFusion 8. As I mentioned in the previous post, I have never had much sucess with the <cfgrid> tag. It seems to offer so much but deliver so little. When it comes down to the final page its always gone in favour of somthing much more clunky but which actually works.
Flush with my sucess with combo boxes in an Ext form. I was convinced that I could move on to the real goal. The Ext Grid control. This seemed to offer everything I wanted. The examples showed all the needed features and with the support of the ColdExt tags I showed no fear.
Well I was soon caught out by the same issue that got me earlier. How to make the combo box do what a select list does. The Ext grid has the same problem with combo boxes as regular forms. However I could not see how to make use of my earlier fix, the use of a hidden field.
There were a number of postings on the Ext Forums, with various solutions, none of which appeared to work for me.
I decided to pick a forum posting by nkohari and worry it until I got somewhere. At first it seemed completly incompatible with the ColdExt tags, so I began with using the Javascript and not using any ColdExt tags.
What was missing from that posting took a little time to discover.
fields: [ "value", "text" ],
data: [
[ "value1", "Option 1" ],
[ "value2", "Option 2" ],
...
]
});
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text",
...
});
Its all in the ... that nkohari adds to the parameters. After a little worrying and changing things I had a working drop down but it was trying to get somthing remotely when all the data was local. Further investigation revealed that the ColdExt tags add mode: "local" where the ... is in the combo definition. Added that and it all worked!
When I looked at the final code I began to realise that there was a way to make most of it work using ColdExt tags.
The main issue is that the renderer has to have a combo box passed to it as a parameter so you have to define your combo boxes before you build the grid rather than inside the grid as normal.
So my final solution uses the script from nkohari to build the renderer and the rest is done with ColdExt:
<!--- Code to fix the combo box in a grid prolem in Ext Grids --->
<ext:script>
Ext.namespace("Ext.ux");
Ext.ux.comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return rec.get(combo.displayField);
};
}
</ext:script>
<!--- Define the combo box --->
<ext:comboBox var="managementCombo" valueField="value" displayField="text" allowBlank="false" >
<cfloop query="qManagement"><ext:option value="#qManagement.mana_id#">#qManagement.mana_title#</ext:option>
</cfloop>
</ext:comboBox>
Inside the grid we simply use the predefined combo box and our renderer.
renderer="Ext.ux.comboBoxRenderer(managementCombo)" editor="managementCombo" />
I hope that helps someone else use the Ext Grid without the hassle I had. Please let me know if it helps you.
I cannot believe though that CF should be based on such a flimsy JS-library with so many flaws. To really be able to make use of the power of a JS-framework, Adobe should offer the regular updates, a la updates to Firefox, Opera, OpenOffice, etc.
I think Yahoo or JQuery would be a better choice for Centaur (CF9), and then coupled with frequent updates. Then we won't ahve to do the things you provide such good examples for ;-)
By the way I think some of the CF8 Ajax is based on Yahoo Libraries.
As has always been the case with cfform, the feature is really geared towards those who are just learning or those who are doing rapid app prototyping. A full scale enterprise implementation has almost always been something that the developer has had to hand code, so that they have full control of implementation.
Care to elaborate on the flaws in Ext-JS? And jQuery doesn't include any components, so how do you compare them?
That coupled with the inability or fear of updating the core elements of the Ajax stuff in CFForm makes me NOT use them.
I tend to only make use of CFTextarea and then couple it to the newest version of FCKEditor at all times.
JQuery just feels better, gets more press and blogposts - but feeling is a hard thing to challenge ;-)
For the record, I use both.