Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: How do I change the color of a grid column header?

  1. #1
    Sencha User
    Join Date
    Feb 2015
    Posts
    30
    Answers
    4
    Vote Rating
    0
      0  

    Default Answered: How do I change the color of a grid column header?

    I am looking to change the color of a grid column header block. Not the cells underneath, just the header block. I am using Sencha Architect, not javascript. Is there a property(s) on the Ext.grid.column.Column that I use in conjunction with a css class or a renderer? I have tried sussing it out in the browser console, but there are hundreds of divs inside of divs to make it impossible to find out exactly where the background color of the header block is coming from. To make this even more fun, I do not want to change the color of all the header blocks, only some of them and there will be multiple colors used depending on the type of column. Can someone point me in the right direction? Remember, I need a Sencha Architect answer, not a javascript answer. Thanks.

  2. Quote Originally Posted by JB3300 View Post
    Yes, thank you, and, as you can see, I created a custom class that does nothing but change the background color and applied it to the element, but we don't have access to the javascript code the way you have it presented. We use Sencha Architect, so I have to add the cls via the property box. When I do, what gets output to the browser is posted above. I have no clue what the other css classes do, they are not available to us to review. They are part of Architect and are hidden in the bowels of the software somewhere. I will call Sencha Architect support for help. Thanks for your help.
    Hi--

    The Fiddle I shared produces the same structure as what you mentioned earlier:

    Code:
    <div class="x-column-header red x-column-header-align-left x-box-item x-column-header-default x-unselectable" style="width: 100px; right: auto; left: 100px; margin: 0px; top: 0px;" id="gridcolumn-1013" tabindex="0" componentid="gridcolumn-1013">
         <div id="gridcolumn-1013-titleEl" data-ref="titleEl" class="x-column-header-inner x-leaf-column-header">
             <span id="gridcolumn-1013-textContainerEl" data-ref="textContainerEl" class="x-column-header-text-container">
                 <span class="x-column-header-text-wrapper">
                     <span id="gridcolumn-1013-textEl" data-ref="textEl" class="x-column-header-text">First Name</span>
                 </span>
             </span>
        </div>
    </div>
    The difference is the CSS rule I created to manage this:

    Code:
    <style>
    .x-column-header.red {
    	background-color: red;
    }
    .x-column-header.red .x-column-header-over,
    .x-column-header.red .x-column-header-sort-ASC,
    .x-column-header.red .x-column-header-sort-DESC {
        background-color: pink;
    }
    </style>
    Thanks
    Joel

  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446
    Vote Rating
    186
      0  

    Default

    Hi--

    In your theme, you should be able to change the $grid-header-background-color variable:
    http://docs.sencha.com/extjs/5.1/5.1...ckground-color

    Thanks!
    Joel

  4. #3
    Sencha User
    Join Date
    Feb 2015
    Posts
    30
    Answers
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by joel.watson View Post
    Hi--

    In your theme, you should be able to change the $grid-header-background-color variable:
    http://docs.sencha.com/extjs/5.1/5.1...ckground-color

    Thanks!
    Joel
    Sorry for the stupid questions, we don't have anyone proficient with Architect or javascript here. Is that a property setting in the config box for the column? or do I attach a renderer and write some code to change the background css variable for that specific column? or do I go into the css file and write some code there? (We are using the Neptune theme provided by Sencha.)

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446
    Vote Rating
    186
      0  

    Default

    Hi--

    If you click on one of your columns, you should see the "Theme" panel appear underneath the config panel. In here, you can find the variables that can be manipulated for the theme.

    Thanks!
    Joel

  6. #5
    Sencha User
    Join Date
    Feb 2015
    Posts
    30
    Answers
    4
    Vote Rating
    0
      0  

    Default

    That looks like an awesome area for changing things after I figure what variable changes what on the screen!

    The variable you mentioned looks like it changes the background behind the grid column header. If I expand the row so the table cell is larger than the header inside it, the new color from $grid-header-background-color peaks out from behind it. In the top section of the Theme area there was a $grid-column-header-color, but it was for the color of the text. I did not see a $grid-column-header-background-color.

    Also it changed that color under every column header in the table, so I don't know if this approach will work for what I am trying to do. I was looking to dynamically change the color for only one column at a time. The end result would be multiple colored column headers to make certain columns stand out better.

    I have used: metaData.tdAttr = 'bgcolor = #DEE3E7 !important;'; inside of a renderer to change the color of a table cell holding data. Is there a way to put a renderer on only the header part of the column? Maybe I can use something similar to metaData.thAttr to handle the column header background color? That way I can have an if statement change the color based on a set of criteria. Thoughts?

  7. #6
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446
    Vote Rating
    186
      0  

    Default

    Hi--

    In that case, it's probably easiest just to add a custom cls to your column, and then provide the CSS styles as needed:

    https://fiddle.sencha.com/#fiddle/v8j

    Thanks!
    Joel

  8. #7
    Sencha User
    Join Date
    Feb 2015
    Posts
    30
    Answers
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by joel.watson View Post
    Hi--

    In that case, it's probably easiest just to add a custom cls to your column, and then provide the CSS styles as needed:

    https://fiddle.sencha.com/#fiddle/v8j

    Thanks!
    Joel
    Here is what Architect produces after I add class "week1" as a "cls" or "componentCls" Ext.Component property in the grid column:

    <div class="x-column-header week1 x-column-header-align-center x-group-sub-header x-box-item x-column-header-default x-box-layout-ct x-unselectable x-group-header x-column-header-first" id="gridcolumn-1181" style="right: auto; left: 0px; margin: 0px; top: 0px; width: 240px;">
    <div id="gridcolumn-1181-titleEl" data-ref="titleEl" class="x-column-header-inner">
    <span class="x-column-header-text-container">
    <span class="x-column-header-text-wrapper">
    <span id="gridcolumn-1181-textEl" data-ref="textEl" class="x-column-header-text">Week 1 Totals</span>
    </span>
    </span>
    </div>
    .....
    </div>

    week1, shown below, shows up after x-column-header, which is the "baseCls" Ext.grid.column.Column property.

    .week1 {
    background-color: #F0FFF0 !important;
    }

    one of the other classes that Architect automatically puts in the div must override the added "cls". I am also having issues with getting the header cell text vertically aligned. I my need to call support instead of trying to drill down through this forum. Thanks for your help.

  9. #8
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,560
    Answers
    13
    Vote Rating
    381
      0  

    Default

    Quote Originally Posted by JB3300 View Post
    one of the other classes that Architect automatically puts in the div must override the added "cls". I am also having issues with getting the header cell text vertically aligned. I my need to call support instead of trying to drill down through this forum. Thanks for your help.
    "Architect automatically puts" is incorrect, is the FRAMEWORK which behaves that way.

    You may have luck if post your question on framework forum: https://www.sencha.com/forum/forumdi...ity-Forums-5.x

    REMEMBER:
    ExtJS is a COMPONENT FRAMEWORK intented to use "as is" - That doesn't limit what you want to do but you need deep understanding of the framework to enhance it.

    Regards.
    UI: Sencha Architect / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: WildFly / Weblogic
    Databases: Oracle
    / MySQL / DB2 / Firebird

    If you like my answer please vote!

  10. #9
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446
    Vote Rating
    186
      0  

    Default

    Hi JB3300--

    Did you look at the Fiddle example I shared?

    Thanks
    Joel

  11. #10
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,560
    Answers
    13
    Vote Rating
    381
      0  

    Default

    Quote Originally Posted by joel.watson View Post
    Hi JB3300--

    Did you look at the Fiddle example I shared?

    Thanks
    Joel
    Hi Joel.

    Seems that docs need little polish: http://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.grid.column.Column-cfg-cls

    "cls : String/String[]
    An optional extra CSS class that will be added to this component's Element. The value can be a string, a list of strings separated by spaces, or an array of strings. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
    Defaults to: ''


    Available since: 1.1.0"

    No mention that is only applied to the header because is inherited doc.

    Regards.
    Last edited by ssamayoa; 12 Oct 2015 at 2:25 PM. Reason: Bad link
    UI: Sencha Architect / ExtJS 4 - 6
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: WildFly / Weblogic
    Databases: Oracle
    / MySQL / DB2 / Firebird

    If you like my answer please vote!

Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 4
    Last Post: 6 Aug 2014, 5:34 PM
  2. Replies: 1
    Last Post: 13 May 2013, 9:37 AM
  3. change the header color for a grid
    By emmadi in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 16 Dec 2008, 8:50 PM
  4. [Solved]change column color of single row(grid column names row)
    By amey7p in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2008, 3:52 AM

Posting Permissions

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