Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

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

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

    Default

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

    Did you look at the Fiddle example I shared?

    Thanks
    Joel
    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.

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

    Default

    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. #13
    Sencha User
    Join Date
    Feb 2015
    Posts
    30
    Answers
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by ssamayoa View Post
    "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.
    Sorry, we are not using Ext.js, we are using a software product we purchased called Sencha Architect, which uses Ext.js in the background, I think. I thought this forum was a support mechanism for that product. Sorry again for posting in the wrong area.

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

    Default

    Quote Originally Posted by joel.watson View Post
    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
    That did it! I had to fiddle with my css file a bit, but I finally got it to work. Woo Hoo! Thanks for all of your help!

  5. #15
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,557
    Answers
    13
    Vote Rating
    378
      0  

    Default

    Quote Originally Posted by JB3300 View Post
    Sorry, we are not using Ext.js, we are using a software product we purchased called Sencha Architect, which uses Ext.js in the background, I think. I thought this forum was a support mechanism for that product. Sorry again for posting in the wrong area.
    SA is meant to craft ExtJS & Touch applications, IS NOT using ExtJS "in the background" (although uses ExtJS in the front).

    Definitely SA is a time saver but you should familiarize with the "raw" API.

    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!

  6. #16
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,557
    Answers
    13
    Vote Rating
    378
      0  

    Default

    Quote Originally Posted by JB3300 View Post
    That did it! I had to fiddle with my css file a bit, but I finally got it to work. Woo Hoo! Thanks for all of your help!
    The example posted by Joel is very nice but you can also just create a simple css selector like:

    .red { background-color: red }

    and put in on cls property of the column. Of course, as I said, Joel's example is nicer because changes the color when column is sorted or you hover.

    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!

  7. #17
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    443
    Vote Rating
    185
      0  

    Default

    Quote Originally Posted by JB3300 View Post
    That did it! I had to fiddle with my css file a bit, but I finally got it to work. Woo Hoo! Thanks for all of your help!
    Cool, glad it's working!

    Thanks
    Joel

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

    Default

    Quote Originally Posted by ssamayoa View Post
    The example posted by Joel is very nice but you can also just create a simple css selector like:

    .red { background-color: red }

    and put in on cls property of the column. Of course, as I said, Joel's example is nicer because changes the color when column is sorted or you hover.

    Regards.
    yeah, Joel suggested the simple red version you have above and it didn't work. When I saw how Joel did the hover pieces, I tried that for the main header section like so:

    .x-column-header .x-column-header.red { background-color: red; }

    all of a sudden, everything started working like magic. I am not sure why the simple version didn't work, but once I got the project where it needed to be, I stopped messing with it. Thanks for your input.

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

    Default

    Quote Originally Posted by ssamayoa View Post
    SA is meant to craft ExtJS & Touch applications, IS NOT using ExtJS "in the background" (although uses ExtJS in the front).

    Definitely SA is a time saver but you should familiarize with the "raw" API.

    Regards.
    Just so we are not talking apples and oranges, we are not using SA as a time saver to write Ext.js. From our perspective, Ext.js just happens to be what SA uses to create screens. Ideally, the Ext.js part would be invisible. We would love nothing more than to use SA as a WYSIWYG tool to create web reports and never touch a line of code.

    We are programmers, but not javascript programmers. We bought SA as a tool to create web reports in-house. This is a minor piece of what we do on a day-to-day basis. Originally, it was thought that SA was all we would need. We found out very quickly that was far from true.

    There is no manual for the software. The Help points us to the Ext.js API, as you mention. We do look at the API to try and figure stuff out, but have not found it very useful. There are few coding examples and the definitions tend to not list the options available. In general, the API seems to speak as though you should already understand how everything works. In that respect, it is more of a reference tool than a teaching manual.

    We have books and online courses on javascript, html, and css, but they seem not to match up with what the Ext.js API refers to all of the time. So, we flounder a bit. This forum is where we come with our stupid questions. We will never have a major push to learn Ext.js because that is not a big part of what we do, but some of us may dabble in our spare time. Is there a book or online course on Ext.js that you are aware of that would help us in this regard? Something that breaks down the structure of how SA builds things and a list of its css classes would be awesome!

  10. #20
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,557
    Answers
    13
    Vote Rating
    378
      0  

    Default

    There is no manual for the software.


    Almost true:
    http://docs.sencha.com/architect/3/


    The Help points us to the Ext.js API, as you mention.
    As Winforms or any other GUI tool does: take you to the component's docs.

    In general, the API seems to speak as though you should already understand how everything works. In that respect, it is more of a reference tool than a teaching manual.


    Agreed. You need a lot of reading and codding to get proficient in ExtJS, that's something that may slow down adoption compared to MS tools or other less complex (and less complete) frameworks.
    I remember that my first ASP.NET took me less than 5 mins using the wizard but took me several days to understand what the wizard did.


    We have books and online courses on javascript, html, and css, but they seem not to match up with what the Ext.js API refers to all of the time

    There is a general misconception of how to use ExtJS: many people use it to do partial rendering of grids and some other components embedded in html pages, "a la jQuery" instead of building the whole app with ExtJS. ExtJS is a client/server components collection as winforms or Delphi's VCL are but written in JavaScript which happens to use html to render the components.

    Is there a book or online course on Ext.js that you are aware of that would help us in this regard?
    I'm not aware of online courses but there are some nice books about ExtJS. I recommend you the latest one wrote by Loiane Groner "Mastering Ext JS, 2nd Edition" (https://www.packtpub.com/web-develop...second-edition).

    It teaches you by example.
    If you know the framework you will be able to write better applications with SA :p

    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!

Page 2 of 3 FirstFirst 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
  •