PDA

View Full Version : [CLOSED][3.0rc2] Bug in GridView#doRender



crp_spaeth
25 Jun 2009, 3:54 AM
If you do something like this in your render function:

renderer: function(value, cell, record, rowIndex, colIndex, store)) {
cell.aditionalClass = (this.isCellEditable(colIndex, rowIndex) ? "x-form-text" : '');
return value
}

all cells in the row followed by this column wil have the property aditionalClass.

I do this cause I want to add a class to the div underneath the td in the grid.
To do so i overwrite the cell template in this way

this.viewConfig = {
forceFit: true,
templates: {
cell: new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id} {aditionalClass}" unselectable="on" {attr}>{value}</div>',
'</td>'
)

}
};


To fix this issue you just need to clear p in each loop.

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()+';';
// buffers
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++){
///// ADDED //////
p={};
//// ADDED END ////
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);
p.style = c.style;
if(Ext.isEmpty(p.value)){
p.value = " ";
}
if(this.markDirty && 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("");
},

Condor
25 Jun 2009, 4:15 AM
You are making things far to difficult!

Simply use:

renderer: function(value, cell, record, rowIndex, colIndex, store)) {
cell.css = (this.isCellEditable(colIndex, rowIndex) ? "x-form-text" : '');
return value
}

with a css rule:

.x-form-text .x-grid3-cell-inner {...}

crp_spaeth
25 Jun 2009, 4:40 AM
Okay Makes Sense...

Maybe you could help me with that... How will the rule
.x-form-text .x-grid3-cell-inner {...}

look like to have get styled like a textfield (same as simply x-form-text) ??

Condor
25 Jun 2009, 4:51 AM
In your original example the inner cell div was given a x-form-text class and your css rule was:

.x-form-text {...}

In my example the outer cell td is given the x-form-text class. So your css rule needs to change to:

.x-form-text .x-grid3-cell-inner {...}

aconran
25 Jun 2009, 9:31 AM
Marking this bug as closed.