How to add style to Ext.grid.feature.Grouping?

[zlevardy]

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]

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]

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]

Thank you for the update.

Scott.