combo values in Editor Grid Panels combo值显示问题

Rendering combo values in Editor Grid Panels.
editorgrid panel 中combo值显示


当您Editor Grid Panel 中给某一列指定editor为combo box时，, 您要显示combo的display field的值而不是combo 的value值。 您可能需要使用一个combo value为 1,2,3 ，而它依次代替红色、 绿色和蓝色的三颜色。

最好的方式是去覆写Ext.grid.GridView 的 doRender 方法 在doRender(args) 参数中添加其它你需要的参数,

如下为作者覆写的 doRender 方法

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("");
    }    
}); 

其处理的关键点在

  p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds, this.grid); 
在此处添加更多的参数　

接下来你就可以自己定义你的renderer了。

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;
}       
}; 

如果你的combo 使用remote load数据, (ie triggerAction: 'query', mode: 'remote')
当combo里选择过时，它的下拉列表被过滤了，而不能显示出值来。
如果这样，你可以重新在　 var s =f.store 此行时定义一个新的store来作筛选用。


end translate－－－－－－

  其实我们通常用的combo很少会用到triggerAction:'query'的方式。
使用　triggerAction:'all' 方式就可避免点了下拉时看不到数据的情况。

评论

1 楼 dazuiba 2009-09-18  

很不可思议，照常理，这个是一个很常见的应用场景，为什么EXTJS的grid不支持？

另外，在formpanel中，extjs是支持这个的。