PDA

View Full Version : How to add style to Ext.grid.feature.Grouping?



zlevardy
22 Aug 2012, 9:52 AM
hi,i am using a dark layout and added grouping to my result grid. The header section of group not applying same style (access), it is white. Can I add some style to it? By CSS entry, or some property - not found any of this.features:



[Ext.create('Ext.grid.feature.Grouping',{ groupHeaderTpl: 'Related Project: {project.name} '})]


tried to play with this Style, does not solve, as another white box left around grid-title.


/*.x-grid-cell-inner, */
.x-grid-group-title {
/* padding: 0px;
border: 0px;
margin: 0px;*/
font-weight: bold;
/* font-size: 22px; */
background-color: #496085;
color: #FFFFFF;
}


thank you

zlevardy
22 Aug 2012, 11:11 AM
this is the generated HTML:



<tr id="gridview-1233-hd-[object Object]" class="x-grid-group-hd">

<td class="x-grid-cell" style="padding-left:0px;" colspan="8">

<div class="x-grid-cell-inner">
<div class="x-grid-group-title"> Project: </div>


</div>


</td>


</tr>


inner-cell stuff not to change due to other format of grid will be damaged,
and the non working style:


/*.x-grid-cell-inner, */
.x-grid-group-hd, .x-grid-group-title {
/* padding: 0px;
border: 0px;
margin: 0px;*/
font-weight: bold;
/* font-size: 22px; */
background-color: #496085;
color: #FFFFFF;
}


I dont want any complicated (for example alternating background color per groups, ... etc.) Just some get rid of that white background of inner and cell without crashing other parts of grid rendering.

thx

zlevardy
23 Aug 2012, 11:00 AM
solution found, this fixes the CSS issue while using Access Style:

.x-grid-group-title {
text-decoration: underline;
background-color: #232D38;
color: #FFFFFF;
}
.x-grid-group-hd {
background-color: #232D38;
}
.x-grid-group-hd .x-grid-cell-inner {
background-color: #232D38;
}

scottmartin
24 Aug 2012, 9:53 AM
Thank you for the update.

Scott.