样式化 TreeVirtual 小部件

Question

我正在使用 qooxdoo TreeVirtual 小部件在我的 Web 应用程序中按角色显示权限，我想在我的虚拟树中应用一些样式。例如，我想更改 + 和 - 图标以展开和折叠分支，还想更改呈现的布尔单元格的样式，使复选框变大。我如何设置虚拟树的样式？ See image here of my tree virtual

谢谢

Answer 1

虽然您可能没有意识到，您实际上是在问两个独立的问题。 TreeVirtual 是 Table 小部件的一个特例。树列使用名为 SimpleTreeDataCellRenderer 的单元格渲染器。其他列只是普通的 Table 单元格渲染器。所以，你的问题的两个部分是：

如何更改 SimpleTreeDataCellRenderer 使用的图标？
如何更改布尔单元格渲染器来执行我的命令？

对于 #1...SimpleTreeDataCellRenderer 使用从应用程序的外观主题中选择的图标。具体来说，打开和关闭图标是根据 "treevirtual-folder" 样式选择的。你会发现它在 qooxdoo 中定义，例如，在现代主题中，在 qx/theme/modern/Appearance.js (classname qx.theme.modern.Appearance) 中。您自己的应用程序也有一个 theme 目录，它会覆盖 qooxdoo 主题。您可以将自己的 "treevirtual-folder" 样式放入应用主题的 Appearance.js 文件中。它看起来像下面这样，添加到 appearances 成员，以复制 qooxdoo 主题的功能。您可以从那里自定义它以使用应用程序资源目录中的图标。

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

对于 #2... 布尔单元格渲染器使用的图标在属性 iconTrue 和 iconFalse 中定义。这些是在资源目录中具有相对路径的字符串属性。它们分别默认为 decoration/table/boolean-true.png 和 decoration/table/boolean-false.png，如果您的应用不提供此类路径，则它们是在 qooxdoo 主题中找到的路径。

通过在您的应用程序中使用 class 扩展现有单元格渲染器，并在实例化 Table 或 TreeVirtual 后指定其使用，对单元格渲染器进行更复杂的更改。

我建议查看 appearance themes 上的文档。

希望对您有所帮助。

德雷尔

样式化 TreeVirtual 小部件

Styling TreeVirtual widget

widget

styling

qooxdoo