Rendering combo values in Editor Grid Panels

When you use a combo box as an editor for a column in an Ext Editor Grid Panel, you want to display the combo's display field, not the combo's value field. Ie you may have a combo with values 1,2,3 but these have descriptions (display fields) of red, green and blue.

To do so the renderer function  of the column model editor needs to access the grid (so it can get the cellEditor and hence the combo).

The most elegant way to do this is by overriding the doRender function of Ext.grid.GridView so that the call to your renderer includes an additional parameter, the grid. That way you can access the combo box's properties.

Override the doRender function like this:

Ext.override(Ext.grid.GridView, {
    doRender : function(cs, rs, ds, startRow, colCount, stripe){
        var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
        var tstyle = 'width:'+this.getTotalWidth()+';';
        var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
        for(var j = 0, len = rs.length; j < len; j++){
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            for(var i = 0; i < colCount; i++){
                c = cs[i];
                p.id = c.id;
                p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                p.attr = p.cellAttr = "";
                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds, this.grid);
                p.style = c.style;
                if(p.value == undefined || p.value === "") p.value = "&#160;";
                if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
                    p.css += ' x-grid3-dirty-cell';
                }
                cb[cb.length] = ct.apply(p);
            }
            var alt = [];
            if(stripe && ((rowIndex+1) % 2 == 0)){
                alt[0] = "x-grid3-row-alt";
            }
            if(r.dirty){
                alt[1] = " x-grid3-dirty-row";
            }
            rp.cols = colCount;
            if(this.getRowClass){
                alt[2] = this.getRowClass(r, rowIndex, rp, ds);
            }
            rp.alt = alt.join(" ");
            rp.cells = cb.join("");
            buf[buf.length] = rt.apply(rp);
        }
        return buf.join("");
    }    
});

The key part here is  p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds, this.grid); with the extra parameter.

Then define your renderer like this:

someRenderer = function(v,md,r,ri,ci,s,g){
var f = g.getColumnModel().getCellEditor(ci,ri).field;
var s = f.store;
record = s.getById(v);
if (typeof record != 'undefined') {
return record.data[f.displayField];
} else {
return v;
}       
};

Note that if your combo uses remote queries (ie triggerAction: 'query', mode: 'remote') your renderer won't find the record in the combo's store if the records are 'filtered'. In these cases change your renderer by omitting the 

var s =f.store line and instead define another store that does not get filtered.