Results 1 to 3 of 3

Thread: Change TreeNode colors

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jan 2010
    Vote Rating

    Default Answered: Change TreeNode colors

    I have a treeGrid where I want the nodes text to change color depending on the content of the model. I've tried doing this with a TreeView:

            TreeGridView view = new TreeGridView();
            view.setViewConfig(new GridViewConfig<TreeNode>(){
                public String getColStyle(TreeNode model,
                        ValueProvider<? super TreeNode, ?> valueProvider,
                        int rowIndex, int colIndex) {
                    if(model.getOrsStatus() == 2)
                        return "GreenGridStyle";
                    if(model.getOrsStatus() == 5)
                        return "BlueGridStyle";
                    return null;
                public String getRowStyle(TreeNode model, int rowIndex) 
                    if(model.getOrsStatus() == 2)
                        return "GreenGridStyle";
                    if(model.getOrsStatus() == 5)
                        return "BlueGridStyle";
                    return null;
    And while the style does become applied it is later overriden by a style called:

    I tested it in Firebug and discovered if I disable
    reference to color being black, it works correctly and inherits my class color.

    What's the best way to override this style? Do I need to create a new Appearance or is there a simpler approach?

  2. Are you familiar with how css style rules can override one another? The basic idea is that each rule has a different 'weight', based on how specific it is, or how early it is in the document. What is probably happening is that your CSS is less specific or is declared earlier than the TreeBaseStyle.text() css.

    One fix for this would be to just cheat, and append !important to the end of your style property:
    .BlueGridStyle {
      color: blue !important;
    This can be difficult to maintain, for example if you have a error style that should override the blue style, you now have to be even more important.

    Another fix is to make your rule more specific, based on giving it a tag name or another parent class to base the rule's selector on (like "div.BlueGridStyle" or ".ThemedGrid .BlueGridStyle").

    And finally, yes, you could override the appearance and remove the color:black to allow your code to more easily take over this property - but as you are building new functionality rather than re-theming existing, I'm not sure this is the best answer.

Tags for this Thread

Posting Permissions

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