Results 1 to 4 of 4

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

  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2009
    Posts
    137
    Vote Rating
    5
      0  

    Default Unanswered: 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
    137
    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
    137
    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,388
    Answers
    716
    Vote Rating
    499
      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
  •