造型 TreeVirtual 小部件答案

【问题标题】：Styling TreeVirtual widget造型 TreeVirtual 小部件
【发布时间】：2019-09-18 15:47:47
【问题描述】：

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

谢谢

【问题讨论】：

标签： widget styling qooxdoo

【解决方案1】：

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

如何更改 SimpleTreeDataCellRenderer 使用的图标？
如何更改布尔单元格渲染器以进行投标？

对于#1... SimpleTreeDataCellRenderer 使用从应用程序的外观主题中选择的图标。具体来说，打开和关闭图标是基于“treevirtual-folder”样式选择的。您会在 qooxdoo 中找到它的定义，例如，在现代主题中，在 qx/theme/modern/Appearance.js（类名 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 主题中找到这些路径。

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

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

希望对您有所帮助。

德雷尔

【讨论】：

太棒了！！！很好的解释，感谢您澄清我写的内容。我很抱歉，我的母语是西班牙语，我还在学习英语，这就是我还不能很好地解释我的想法的原因。