PDA

View Full Version : Grouping Store/View and CSS after render



rekam
16 Mar 2010, 1:31 PM
Hi!

I just have a little (easy I hope) question:

I have a grid with a grouping store and a grouping view. After all that stuff is rendered, it's possible to change the column we want to group. All that is OK.

What I'm searching for id a way to change cells CSS of the grouped column. It's because I would like to hide the content of these cells, since it's already written in the group-header.

Let's say we have a column "country". If we group by this column, we will have :



------- Swaziland : 15 items ------
Swaziland 0.5 ok
Swaziland 0.2 ok
Swaziland 1.0 ok
Swaziland 0.3 ok
...


And I would like the same thing, but without text in cells of grouped column:



------- Swaziland : 15 items ------
[ ] 0.5 ok
[ ] 0.2 ok
[ ] 1.0 ok
[ ] 0.3 ok
...


I tried overriding GroupingView.getRowClass(), but it's only on render. Is it possible to do so? If yes, how ??

Thanks!

Stormseeker
17 Mar 2010, 5:38 AM
What about the config option in GroupingView called: hideGroupedColumn?
(true to hide the column that is currently grouped (defaults to false))

http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.GroupingView
(http://www.extjs.com/forum/../deploy/dev/docs/source/GroupingView.html#cfg-Ext.grid.GroupingView-hideGroupedColumn)

rekam
18 Mar 2010, 2:41 AM
Oh I missed this configuration option. Unfortunately, this is a little bit too much, because the column disappear totally.

I would like the header to stay visible, and simply the TD content DIV to hide.

So the grouped column itself is visible, but not the content. I don't know if it's really better for the user. But anyway, to make the header disappear isn't very userfriendly ;)

Is it possible to "visibility: hidden" the content DIV of the TD ?

thanks

rekam
18 Mar 2010, 3:24 AM
So I did this override of Ext.grid.GridView, which does what I want :



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()+';';
// buffers
var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;

// check group object column and group index, if a field is grouped
var groupIndex = null, groupColumn = null;
if (typeof this.getGroupField == 'function') {
var groupField = this.getGroupField();
groupIndex = groupField ? this.cm.findColumnIndex(groupField) : null;
var groupId = groupIndex ? this.cm.getColumnId(groupIndex) : null;
groupColumn = groupId ? (this.cm.getColumnById(groupId) || {}) : {};
}

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.call(c.scope, 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 && Ext.isDefined(r.modified[c.name])){
p.css += ' x-grid3-dirty-cell';
}

// add this check to verify if we want to hide cell content
if (i === groupIndex && groupColumn.hideContentWhenGrouped) {
p.css += ' x-grid3-cell-content-hide ';
}

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 css


.x-grid3-cell-content-hide .x-grid3-cell-inner {
visibility: hidden;
}


and a column definition


{
dataIndex : 'title',
header : 'Title',
hideContentWhenGrouped: true
}