1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    0
    altamirador is on a distinguished road

      0  

    Wink Probably simple answer: How to change grid group header style ?

    Probably simple answer: How to change grid group header style ?


    Hi to all !

    Thanks for reading this and tinkering with it !

    Before posting, I spent about 2 hours "googleing" an trying to find the answer to a problem that is probably very simple.

    I'm creating a simple grouping grid ans, so far, everything is working. I'm fixing some cosmetic problems...

    I'd like to be able to custom render the group header instead of what is rendered by default in terms of styles and colors...

    I tried to use this:
    (this does not display a span of 120px wide...)
    Code:
    groupTextTpl: '<span style="width:120px;font-style:bold;">{text}</span> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
    or this:
    (this returns a header with 2 "plus/minus" signs)
    Code:
    groupTextTpl: '<div style="width:120px;font-style:bold;">{text}</div> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
    Asides from this, I'd llike to be able to change the background color and remove the underline of the entire row of the header in the grid.

    I have "inspected" the code with Firebug... I could change the "x-grid-group-hd" class but I'd rather not since this class is used elsewhere in my website !

    Many thanks to everyone for your enlightments !

    Altamira !

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    CSS rules can be targetted.

    Code:
    .myPanelClass .x-grid-group-hd {
    }
    This is why Ext applies classes to elements.

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    0
    altamirador is on a distinguished road

      0  

    Default


    Animal ! I knew you where there somewhere in the cyberspace !

    I have read a lot of your contributions, and it has been very helpful in becoming better at using Extjs !

    That being said, you will find me stupid for I do no really understand the concept of "css re targeting" ???

    I would I got about applying that newly created CSS to an existing header group ? Here is my html from Firebug:


    HTML Code:
    <div id="ext-gen40-gp-numeroinscription-2999-hd" class="x-grid-group-hd" style="width: 708px;">
    Thanks again for your input !

    Altamirador !

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    As a web developer you need to be familiar with CSS.

    http://www.w3.org/TR/CSS2/selector.html

  5. #5
    Ext User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    0
    altamirador is on a distinguished road

      0  

    Default


    Will do the reading ! THX !

  6. #6
    Ext User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    0
    altamirador is on a distinguished road

      0  

    Default


    Marvelous !

    See ! I learned something today ! It works like a breeze !

    Thx Animal !

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    0
    altamirador is on a distinguished road

      0  

    Default Found something interesting...

    Found something interesting...


    Thanks to Animal, I have read something about CSS that I was not familiar and I found somewhat of a bug in Ext grid rendering...


    If you set your group header to contain a DIV like this:

    HTML Code:
    groupTextTpl: '<div style="width:120px;font-style:bold;">{text}</div> {[ values.rs[0].data["Titre"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
    You will get something like the what's in the first picture attached...Another DIV with a plus/minus symbol...

    By reading what Animal suggested to me (CSS Selectors..See reference above) I was able to figure out that the CSS in Ext-all.css could be flawed...Thus preventing from using DIV's in goupTextTpl.

    Code:
    .x-grid-group-hd {
        border-bottom: 2px solid #99bbe8;
        cursor:pointer;
        padding-top:6px;
    }
    .x-grid-group-hd div {
        background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
        padding:4px 4px 4px 17px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }
    Since the CSS ".x-grid-group-hd div " will affect all subsequent DIV's and that in the group header there is indeed a DIV to encompass all that is included in in groupTextTpl:

    HTML Code:
    <div id="ext-gen40-gp-numeroinscription-2275-hd" class="x-grid-group-hd" style="width: 708px;"><div><div style="width: 120px;"># cours: 2275</div> TIME MANAGEMENT AND DELEGATION - Level 1 (1 Item) </div></div>
    I suggest that the CSS should be changed to only affect the first DIV inside. Hence this modification:

    Code:
    .x-grid-group-hd {
        border-bottom: 2px solid #99bbe8;
        cursor:pointer;
        padding-top:6px;
    }
    .x-grid-group-hd div:first-child {
        background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
        padding:4px 4px 4px 17px;
        color:#3764a0;
        font:bold 11px tahoma, arial, helvetica, sans-serif;
    }
    Comments are welcomed !

    Altamira
    Attached Images

  8. #8
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    Buffalo, NY
    Posts
    9
    Vote Rating
    0
    dfox is on a distinguished road

      0  

    Smile


    Hi,
    I've recently been attempting to do the same thing and this is how I implemented styles in the grid group header.

    From the base example:
    Code:
    var grid = new Ext.grid.GridPanel({
        ...
        view: new Ext.grid.GroupingView({
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
    });
    Personally, I wanted to apply red text to the group header if the content contained 'bad' data. Meaning one of my columns is a indicator field and if a row had a 'Y' in that column it needed to be flagged.

    So, using the <p> tag I could apply a style:
    Code:
    groupTextTpl: '<p style="color:red">{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})</p>'
    But this caused every line to be colored red. The ExtJs API Documentation page refers you to Ext.XTemplate which can be a bear to understand (especially for an ext-js newbie like me).

    The line of code specified by the groupTextTpl is internally inserted into a piece of code something like:
    Code:
    var tpl = new Ext.XTemplate(
        '<div id=x>',
        Your_groupTextTpl_line_here,
        '</div>'
    );
    Note: That is not the actual internal code but relays the essence of it.

    But this means that we can utilize some of the template functionality, specifically:
    Code:
         groupTextTpl: '<p <tpl for="rs"><tpl for="data"><tpl if="OUT_OF_DATE == &quot;Y&quot;" > style="color:red"</tpl></tpl></tpl> >{group} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})</p>'
    What this does is:
    insert the <p
    Then begin a template for loop on the internal array 'rs'
    Then begin a 2nd template for loop on the internal array 'data'
    Then check my data, called OUT_OF_DATE to see if it is a 'Y'
    If it is, insert the string ' style="color:red" '
    End all looping
    Then insert a closing '>' followed by the rest of the text on the header line, including an ending </p>

    The only problem is that this will generate:
    Code:
    <p style="color:red" style="color:red"> Text </p>
    when there are two rows where OUT_OF_DATE is 'Y'.

    Unfortunately there is no break loop functionality (I completely understand why), nor is
    there an else to the template if statements.

    But in the end it rendered what I wanted it to render.

    Hope this is understandable
    Enjoy

    DFox

Thread Participants: 2