Question

On CF9, a CFGridcolumn with type=”combobox” will have “typeAhead” set to false in the underlying javascript. typeAhead is the auto-complete effect for a combobox, which you can see here, in the “Light” column: http://www.extjs.com/deploy/dev/examples/grid/edit-grid.html

I’d like to know how to add this typeAhead functionality into an EXTJS-based grid using ColdFusion 9 and CFGrid/CFGridColumn along with the associated Coldfusion.Grid functions.

Thanks for guidance.

Answer 1

Here’s how:

you create a js function that looks something like this:

    function formatGrid(){
    var grid = ColdFusion.Grid.getGridObject("configgrid");
    var colModel = grid.getColumnModel();

    colModel.setRenderer(1,function(value, p, record, rowIndex, colIndex){
        var val = "";
        var editor = colModel.getCellEditor(colIndex,rowIndex);
        Ext.apply(editor.field,{typeAhead:true,editable:true});
        return value;
    });     

}

In the setRenderer call, the “1” refers to the zero-based index of the column you’re modifying. If you had multiple combobox columns, you could easily extract this function to be more generic and accept a column model and column index.

Then, to call the function, on CF8 you can use

<cfset ajaxOnLoad("formatGrid")>

On CF9 you can use the onload attribute of the CFGrid tag, and set it to “formatGrid” (or whatever you wish to call your function)

For what it’s worth, I finally saw the light after watching Cutter’s presentation on CF9/Ajax here: http://experts.na3.acrobat.com/p62805180/

That gave me what I needed to get the renderer applied to the column model. Then, I looked in the source for what ColdFusion is creating for the column model, and I saw “editable:false” for the dropdown field. Turning editable:true on was the missing piece for getting typeAhead:true to work.