Using Ext JS 2.2 Ajax in CF - Part 1 - Coldext plus Combo box Id and Value

Over the last couple of weeks I have been playing with a new Ajax library. New? Well its been around a while but it is new to me.

The reason for my interest was the frustration I had with using the grid in ColdFusion. The cfgrid tag is very appealing but every time I tried to use it, something I needed did not work quite well enough or quite the way I wanted in order to make it suitable for the application. It has always been very frustrating. The latest CF8 implementation is no better. I realised that the thing I was working on would be best done with some kind of grid. I started with a cfgrid tag and soon realised that my idea would not quite work.

Then I remembered that the latest CF8 HTML grid uses Ext 1.0 as its underlying engine. I took a quick look at the Ext web site and the grid demo.

When I tried the samples I saw immediately that the latest version of Ext would do what I needed. Basicly I wanted to be able to easily page through a number of records and the examples had a way of adding a paging toolbar and a toolbar with icons for save and refresh and so on.

The only problem for me was that my exiting application code was using some other ColdFusion features that were based on Ext. I realised that using two different versions of Ext together would impossible so I had to replace all the existing easy to use CF tab based stuff with Ext code which is based on Javascript. It was do-able but not vey nice.

Luckily before I began the job I thought to check RIAforge and found that Justin Carter had created a series of CF custom tags to support the Ext 2.2 libary. Basicly each tag exacly mimics the JS call so that you can write a CF tag instead of the JS code.

For me this made the conversion much easier. No need to reformat everything just change some of the tags to call Justin's tags and it worked! A big thank you to Justin for the tag library.

Since then I have come across some issues with the way Ext JS things work and found work arounds. Some of them are not quite sraightforward, I decided to document my solutions so that anyone else who wants can avoid going through the hassle.

So here is my first contribution....

Combo box Id and Value

At first sight the Ext JS combo box seems to be exacly like an HTML select. There is a dropdown list, you can choose somthing from the list and it gets displayed. Simple? Wrong!

The combo box is actually a more complex control and although it can look a bit like a select it is actually a completely new beast to those who have grown up using HTML. In the default mode the combo box does one major thing that the select does not and that is it allows you to type a new thing into the box that is not just one of the items in the drop down. This is the key to the reson why it does not work like a select control.

While the select control allows you to choose a value and returns the id associated with that value the combo can't quite do that. Because you can type somthing it has to return what is displayed. After all it might just be something not actually in the dropdown list.

You can set the contol so that it does not allow typing by setting a parameter, (editable="false"), but that won't make the control return the id rather than the value. On the Ext Js web site there are some complex solutions offered with cuson renderers for the combo box, but somehow they don't feel easy to implement.

What I decided to do was to create a hidden control and use that for the id. When someone updates the choice, a change event can be used to update the hidden contol. Here is an example written using the coldext tags.

I hope you find it useful. Please let me know if you do.