Results 1 to 4 of 4

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    139
    Vote Rating
    5
      0  

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

    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:

    Code:
    [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.
    Code:
    /*.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
    Last edited by zlevardy; 22 Aug 2012 at 10:57 AM. Reason: added style item, formatting code parts

  2. #2
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    139
    Vote Rating
    5
      0  

    Default

    this is the generated HTML:

    Code:
    <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:
    Code:
    /*.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

  3. #3
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    139
    Vote Rating
    5
      0  

    Default

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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    Thank you for the update.

    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •