Styling TreeVirtual widget

I'm using a qooxdoo TreeVirtual widget to display permissions by role in my web application, and I want to apply some styles in my tree virtual. For example, I want to change the + and - icons to expand and collapse the branches, and also I want to change the style of Boolean cell rendered, make the checkbox bigger. How can I style the tree virtual? See image here of my tree virtual

Thank you

Solution

Although you probably don't realize it, you are actually asking two independent questions here. TreeVirtual is a special case of the Table widget. The tree column uses a cell renderer called SimpleTreeDataCellRenderer. The other columns are just ordinary Table cell renderers. So, the two parts of your question are:

How do I change the icons used by the SimpleTreeDataCellRenderer?
How do I alter the Boolean cell renderer to do my bidding?

For #1... The SimpleTreeDataCellRenderer uses icons selected from the application's appearance theme. To be specific, the open & close icons are selected based on the "treevirtual-folder" style. You'll find this defined in qooxdoo, e.g., in the modern theme, in qx/theme/modern/Appearance.js (classname qx.theme.modern.Appearance). Your own app has a theme directory as well which overrides a qooxdoo theme. You can place your own style for "treevirtual-folder" into your app's theme's Appearance.js file. It will look something like the following, added to the appearances member, to replicate what the qooxdoo theme does. You can customize it from there to use icons in your app's resources directories.

    "treevirtual-folder" :
    {
      style : function(states)
      {
        return {
          icon : states.opened ?
            "icon/16/places/folder-open.png" :
            "icon/16/places/folder.png"
        };
      }
    }

For #2... The icons used by the Boolean cell renderer are defined in properties iconTrue and iconFalse. These are string properties with a relative path within the resources directory. They default to decoration/table/boolean-true.png and decoration/table/boolean-false.png, respectively, which are paths that are found within the qooxdoo theme if your app does not provide such paths.

More sophisticated changes to a cell renderer are made by extending an existing cell renderer with a class in your app, and specifying its use after you instantiate the Table or TreeVirtual.

I recommend reviewing the documentation on appearance themes.

Hope that helps.

Derrell