Threaded View

  1. 6 Dec 2012 9:02 AM #1
    darkling235
    darkling235 is offline
    Sencha User
    Join Date
    Jan 2010
    Posts
    125
    Vote Rating
    1
    Answers
    2
    darkling235 is on a distinguished road
      0  

    Default Answered: Change TreeNode colors

    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:

    Code:
            TreeGridView view = new TreeGridView();
        view.setViewConfig(new GridViewConfig<TreeNode>(){

            @Override
            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;
            }

            @Override
            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:

    GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text
    I tested it in Firebug and discovered if I disable
    GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text's
    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?
    Thanks
    Reply With Quote Reply With Quote
  2. Best Answer Posted by Colin Alworth

    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:
    Code:
    .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.