文档帮助

术语、图标和标签

许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 别名(如果类扩展了 Ext.Component,则称为 xtype)。别名/xtype 列在适用类的类名旁边,以便快速参考。

访问级别

框架类或其成员可以指定为 privateprotected。否则,类/成员为 publicPublicprotectedprivate 是访问描述符,用于传达类或类成员应如何以及何时使用。

成员类型

成员语法

下面是一个示例类成员,我们可以对其进行剖析,以展示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。

lookupComponent ( item ) : Ext.Component
受保护

当原始配置对象添加到此容器时调用,无论是在 items 配置的初始化期间,还是在添加新项目时 added),或 {@link #insert 插入

此方法将传递的对象转换为实例化的子组件。

当需要对子创建应用特殊处理时,可以在子类中重写此方法。

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看一下成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- Singleton 框架类。*有关更多信息,请参阅 singleton 标志

- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

- 表示类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面的类名下方,有一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数会随着过滤器的应用而更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所作用的配置下方。Getter 和 Setter 方法文档将在配置行中找到,以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中,并显示在顶部标题栏下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选选项来扩展显示的内容。这将显示历史记录栏中所有产品/版本的所有最近页面。

在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选选项进行过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”,则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后,每个历史页面的产品/版本将与页面名称一起显示在历史记录栏中。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上,还有一个过滤器输入字段,用于使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表以包含或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索,以便快速导航。

API 文档类元数据

每个 API 文档页面(JavaScript 原始类型页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例及类成员

可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。页面加载之间将记住全部切换状态。

类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠全部切换按钮全局展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

History :

GXT 4.x

Announcements
API Javadocs
Getting Started
Concepts
Data
UI
DOM
GWT
Testing
Benefits
Support
Licenses

顶部

生成主题

随着 GXT 4.0 主题构建器的推出,您现在可以通过生成主题并从大量视觉选择中进行选择来开始使用。只需几个起始设置即可启动此新功能。

参考

要求

Java 7

Sencha 专业服务

Sencha 专业服务也可以为您构建主题。您可以在此处咨询 专业服务 选项。

运行 Themer

Themer 可以通过多种方式运行。最简单的入门方法是从命令行开始。您可以通过运行 GXT 下载脚本中提供的预构建脚本之一来执行此操作。

themer.bat 文件旨在与 Windows 配合使用,

themer.sh 旨在在 Mac OS X 上工作。

创建一个在 Linux 上工作的脚本仅需 下载正确版本的 PhantomJS 并指定可执行文件的路径即可。

Themer 也可以直接从 Java 作为 Ant 目标或作为 Maven exec:java 目标的一部分运行。

注意: 这些脚本假定 Java 7 已设置为命令行使用,并且已指定特定于平台的 PhantomJS 安装位置。

Runner 选项

这些选项在 Windows 和 Mac 上均可用。

usage: ThemeBuilder [options] [config ...]
 -gen <path>                        directory to generate code to.
 -generateConfig <outputFile>       Generate sample configuration.
 -gwtXmlFilename <gwtXmlFilename>   Give ability to rename the Theme.gwt.xml file to something else. Must end with .gwt.xml.
 -h,--help                          Print this message.
 -i,--imagePath <customImagePath>   Optional path to custom images or SVG files for image generation.
 -imageFile <path>                  Captured image used for slicing images.
 -manifestFile <manifestFile>       JSON manifest file of the captured image.
 -out <jar>                         Path to jar file to generate.  Default is a jar named <theme.name>.jar in the current directory.
 -slicedDisabled <slicedDisabled>   Whether sliced version of the theme is disabled - flat themes or modern browsers.  Default is false.
 -sourcesOnly <boolean>             Sources only vs compile and jar. Default is false.
 -warDir <warDir>                   Directory to compile the css3-based theme to before images are sliced from it.

Maven 启动器选项

作为一种选择,您可以使用 Maven 执行主题构建器。这最好通过 示例原型 项目来展示。

多配置文件支持

主题构建器支持传递多个配置文件。所有配置详细信息都可以存在于单个文件中,但在某些情况下,将这些配置分隔到多个文件中可能很方便。这可以帮助将大型文件分解为不同的“详细信息”组。这种组织方法的一个示例可以是 myconfig-base.thememyconfig-tools.thememyconfig-window.theme 等。

此功能还支持为单个应用程序维护多个主题的能力。通用配置组件可以抽象到单独的文件中,并在主题生成之间重复使用。这可以帮助最大限度地减少多个主题之间的维护,同时减少复制/粘贴。

所有配置文件都按照它们在命令行中出现的顺序进行处理。
通常,只要每个文件中的配置选项之间有明确的分隔,顺序就无关紧要。但是,如果多个文件中存在相同的配置,则最后一个配置生效。命令输出中没有指示存在多个配置,因此由开发人员来识别这些情况。

与单个配置文件选项一样,在运行主题生成器时必须提供完整的配置。如果缺少任何部分,则会显示一条错误消息,指示缺少哪些路径。必须先更正这些路径,然后生成器才能继续。

自定义图标

可以通过 -imagePath <path> 提供自定义图标。这些图标可以是栅格或 SVG 文件类型。

  • 图标命名可以像 icon.svgiconOver.svgiconClick.svg 这样给出。默认图标在所有情况下都显示,over 图标用于鼠标悬停,click 图标用于单击选择。

  • 当使用 SVG 文件时,可以提供 icon.css 模板文件来覆盖 SVG 文件中的样式。

  • GXT 4.x 图标覆盖必须使用主题构建器中给出的相同图标。

在 4.x 中使用 -imagePath 覆盖图标的目录布局如下所示。注意: 图像可以使用 .jpg.png

    icons
        icons/button
            icons/button/arrow.cssTemplate
            icons/button/arrow.svg
            icons/button/arrowBottom.svg
            icons/button/split.cssTemplate
            icons/button/split.svg
            icons/button/splitBottom.cssTemplate
            icons/button/splitBottom.svg
            icons/button/toolBarArrow.cssTemplate
            icons/button/toolBarArrow.svg
            icons/button/toolBarArrowBottom.cssTemplate
            icons/button/toolBarArrowBottom.svg
            icons/button/toolBarButtonSplit.cssTemplate
            icons/button/toolBarButtonSplit.svg
            icons/button/toolBarButtonSplitBottom.cssTemplate
            icons/button/toolBarButtonSplitBottom.svg
        icons/container
            icons/container/moreIcon.cssTemplate
            icons/container/moreIcon.svg
            icons/container/moreIconToolBar.cssTemplate
            icons/container/moreIconToolBar.svg
        icons/field
            icons/field/allLeft.svg
            icons/field/allRight.svg
            icons/field/bold.cssTemplate
            icons/field/bold.svg
            icons/field/checked.cssTemplate
            icons/field/checked.svg
            icons/field/clearTrigger.cssTemplate
            icons/field/clearTrigger.svg
            icons/field/dateTrigger.cssTemplate
            icons/field/dateTrigger.svg
            icons/field/down.svg
            icons/field/exclamation.svg
            icons/field/fontDecrease.cssTemplate
            icons/field/fontDecrease.svg
            icons/field/fontHighlight.cssTemplate
            icons/field/fontHighlight.svg
            icons/field/fontIncrease.cssTemplate
            icons/field/fontIncrease.svg
            icons/field/italic.cssTemplate
            icons/field/italic.svg
            icons/field/justifyCenter.cssTemplate
            icons/field/justifyCenter.svg
            icons/field/justifyLeft.cssTemplate
            icons/field/justifyLeft.svg
            icons/field/justifyRight.cssTemplate
            icons/field/justifyRight.svg
            icons/field/left.svg
            icons/field/link.cssTemplate
            icons/field/link.svg
            icons/field/ol.cssTemplate
            icons/field/ol.svg
            icons/field/radioSelected.cssTemplate
            icons/field/radioSelected.svg
            icons/field/radioUnselected.cssTemplate
            icons/field/radioUnselected.svg
            icons/field/right.svg
            icons/field/source.cssTemplate
            icons/field/source.svg
            icons/field/spinnerDown.cssTemplate
            icons/field/spinnerDown.svg
            icons/field/spinnerUp.cssTemplate
            icons/field/spinnerUp.svg
            icons/field/triggerArrow.cssTemplate
            icons/field/triggerArrow.svg
            icons/field/ul.cssTemplate
            icons/field/ul.svg
            icons/field/unchecked.cssTemplate
            icons/field/unchecked.svg
            icons/field/underline.cssTemplate
            icons/field/underline.svg
            icons/field/up.svg
        icons/grid
            icons/grid/checked.cssTemplate
            icons/grid/checked.svg
            icons/grid/collapse.cssTemplate
            icons/grid/collapse.svg
            icons/grid/columnHeaderBtn.cssTemplate
            icons/grid/columnHeaderBtn.svg
            icons/grid/columnsIcon.cssTemplate
            icons/grid/columnsIcon.svg
            icons/grid/expand.cssTemplate
            icons/grid/expand.svg
            icons/grid/groupBy.cssTemplate
            icons/grid/groupBy.svg
            icons/grid/sortAscendingIcon.cssTemplate
            icons/grid/sortAscendingIcon.svg
            icons/grid/sortAscHeaderIcon.cssTemplate
            icons/grid/sortAscHeaderIcon.svg
            icons/grid/sortDescendingIcon.cssTemplate
            icons/grid/sortDescendingIcon.svg
            icons/grid/sortDescHeaderIcon.cssTemplate
            icons/grid/sortDescHeaderIcon.svg
            icons/grid/unchecked.cssTemplate
            icons/grid/unchecked.svg
        icons/menu
            icons/menu/activeMenuParent.cssTemplate
            icons/menu/activeMenuParent.svg
            icons/menu/checked.cssTemplate
            icons/menu/checked.svg
            icons/menu/groupChecked.cssTemplate
            icons/menu/groupChecked.svg
            icons/menu/menuParent.cssTemplate
            icons/menu/menuParent.svg
            icons/menu/miniBottom.cssTemplate
            icons/menu/miniBottom.svg
            icons/menu/miniTop.cssTemplate
            icons/menu/miniTop.svg
            icons/menu/unchecked.cssTemplate
            icons/menu/unchecked.svg
        icons/statusproxy
            icons/statusproxy/dropAllowed.svg
            icons/statusproxy/dropNotAllowed.svg
        icons/tabs
            icons/tabs/activePlainTabClose.cssTemplate
            icons/tabs/activePlainTabClose.svg
            icons/tabs/activeTabClose.cssTemplate
            icons/tabs/activeTabClose.svg
            icons/tabs/plainTabClose.cssTemplate
            icons/tabs/plainTabClose.svg
            icons/tabs/scrollerLeft.svg
            icons/tabs/scrollerRight.svg
            icons/tabs/tabClose.cssTemplate
            icons/tabs/tabClose.svg
        icons/tips
            icons/tips/anchorBottom.cssTemplate
            icons/tips/anchorBottom.svg
            icons/tips/anchorLeft.cssTemplate
            icons/tips/anchorLeft.svg
            icons/tips/anchorRight.cssTemplate
            icons/tips/anchorRight.svg
            icons/tips/anchorTop.cssTemplate
            icons/tips/anchorTop.svg
        icons/toolbar
            icons/toolbar/first.cssTemplate
            icons/toolbar/first.svg
            icons/toolbar/last.cssTemplate
            icons/toolbar/last.svg
            icons/toolbar/next.cssTemplate
            icons/toolbar/next.svg
            icons/toolbar/prev.cssTemplate
            icons/toolbar/prev.svg
            icons/toolbar/refresh.cssTemplate
            icons/toolbar/refresh.svg
        icons/tools
            icons/tools/close.svg
            icons/tools/collapse.svg
            icons/tools/doubleDown.svg
            icons/tools/doubleLeft.svg
            icons/tools/doubleRight.svg
            icons/tools/doubleUp.svg
            icons/tools/down.svg
            icons/tools/expand.svg
            icons/tools/gear.svg
            icons/tools/left.svg
            icons/tools/maximize.svg
            icons/tools/minimize.svg
            icons/tools/minus.svg
            icons/tools/pin.svg
            icons/tools/plus.svg
            icons/tools/print.svg
            icons/tools/question.svg
            icons/tools/refresh.svg
            icons/tools/restore.svg
            icons/tools/right.svg
            icons/tools/save.svg
            icons/tools/search.svg
            icons/tools/unpin.svg
            icons/tools/up.svg
        icons/tree
            icons/tree/arrowDown.cssTemplate
            icons/tree/arrowDown.svg
            icons/tree/arrowRight.cssTemplate
            icons/tree/arrowRight.svg
            icons/tree/checked.cssTemplate
            icons/tree/checked.svg
            icons/tree/folder.cssTemplate
            icons/tree/folder.svg
            icons/tree/folderOpen.cssTemplate
            icons/tree/folderOpen.svg
            icons/tree/partial.cssTemplate
            icons/tree/partial.svg
            icons/tree/unchecked.cssTemplate
            icons/tree/unchecked.svg
        icons/widget
            icons/widget/downIcon.cssTemplate
            icons/widget/downIcon.svg
            icons/widget/leftButton.cssTemplate
            icons/widget/leftButton.svg
            icons/widget/miniBottom.svg
            icons/widget/miniLeft.svg
            icons/widget/miniRight.svg
            icons/widget/miniTop.svg
            icons/widget/rightButton.cssTemplate
            icons/widget/rightButton.svg

Windows Runner

在 Windows 上,您可以运行

    > themebuilder/bin/themer.bat

这是一个使用“快速入门”主题配置的示例。

    > .\themebuilder\bin\themer.bat .\themebuilder\examples\quick-start\quick-start.theme

Mac Runner

在 OS X 上,您可以运行

    $ ./themebuilder/bin/themer.sh

这是一个使用“快速入门”主题配置的示例。

    $ ./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme

控制台输出

Themer runner 控制台输出将如下所示。

示例输出

    template generation started
    template generation complete
    image generation started
    generating tool icons

    Saving sliced image to /private/var/folders/x8/9wz7qtw96t7grkdyjw1l61p40000gn/T/temp7830532799076699840.1/com/example/client/sliced/window/window-r.png
    Slicing complete - generated 225 images
    slice complete
    packaging started
    packaging complete

    The quickstart theme has finished generating.
    Copy the jar (/Path/To/Jar/quickstart.jar) into your project and copy the following line into your gwt.xml file:

    <inherits name="com.example.Theme" />

自定义 Neptune 或 Triton 主题

您可以通过自定义 neptune.themetriton.theme 配置文件来 Fork Neptune 主题。

Mac

  1. 下载 GXT 4.0 zip 文件。
  2. 解压 GXT 4.0 zip 文件。
  3. gxt-theme-neptune.jar 重命名为 gxt-theme.neptune.zip
  4. 解压 gxt-theme-neptune.zip 内容。
  5. 使用文本编辑器打开并修改 ./gxt-theme-neptune/neptune.theme
    • name 属性更改为类似 name = "custom_neptune" 的内容。
    • basePackage 更改为类似 tld.domain.theme.custom_neptune 的内容。
    • 修改主题中的属性以生成所需的主题。
  6. 使用 ../themebuilder/bin/themer.sh ./neptune.theme 生成主题
  7. 生成名为 custom_neptune.jar 的 jar 文件。注意: 将 jar 复制到项目库文件夹,该文件夹可以命名为 gxt-project/lib 文件夹。
  8. gxt_project/lib/custom_neptune.jar 上“右键单击”并 添加到构建路径
  9. 然后将主题添加到 gxt_project 模块 <inherits name="tld.domain.theme.custom_neptune.Theme" /> 注意: 确保禁用 gxt_project 模块配置中的任何其他主题。
  10. 运行应用程序并验证主题是否已加载。
  11. 返回步骤 5 进行更多主题修改。

Windows

  1. 下载 GXT 4.0 zip 文件。
  2. 解压 GXT 4.0 zip 文件。
  3. gxt-theme-neptune.jar 重命名为 gxt-theme.neptune.zip
  4. 解压 gxt-theme-neptune.zip 内容。
  5. 使用文本编辑器打开并修改 .\gxt-theme-neptune\neptune.theme
    • name 属性更改为类似 name = "custom_neptune" 的内容。
    • basePackage 更改为类似 tld.domain.theme.custom_neptune 的内容。
    • 修改主题中的属性以生成所需的主题。
  6. 使用 ..\themebuilder\bin\themer.bat .\neptune.theme 生成主题
  7. 生成名为 custom_neptune.jar 的 jar 文件。注意: 将 jar 复制到项目库文件夹,该文件夹可以命名为 gxt-project/lib 文件夹。
  8. 右键单击 gxt_project\lib\custom_neptune.jar添加到构建路径
  9. 然后将主题添加到 gxt_project 模块 <inherits name="tld.domain.theme.custom_neptune.Theme" /> 注意: 确保禁用 gxt_project 模块配置中的任何其他主题。
  10. 运行应用程序并验证主题是否已加载。
  11. 返回步骤 5 进行更多主题修改。

快速入门示例

GXT 4.0 下载 zip 文件中的 themebuilder/examples 目录中有四个示例。每个文件夹都包含自己的 readme.txt 文件。

骨架配置主题

skeleton-config/ - 顾名思义,这只是一个骨架,仅包含主题构建所需的属性。它展示了所有选项,让您决定在构建主题时要更改什么。

生成骨架配置主题

  1. 打开并将所有值添加到 skeleton-config.theme 文件中的属性。
    • Windows:.\themebuilder\examples\skeleton-config\skeleton-config.theme
    • Mac:./themebuilder/examples/skeleton-config/skeleton-config.theme
  2. 生成主题。
    • Windows:.\themebuilder\bin\themer.bat .\themebuilder\examples\skeleton-config\skeleton-config.theme
    • Mac:./themebuilder/bin/themer.sh ./themebuilder/examples/skeleton-config/skeleton-config.theme
  3. 在运行 themer 命令的同一目录中查找生成的主题 jar 文件。

快速入门主题

quick-start/ - 此示例已预先填写了所有必要的属性。大多数这些属性都构建为基于文件顶部定义的值。这使您只需进行少量更改即可非常快速地获得理想主题的粗略草稿。然后,您可以进一步深入进行更多更改,并获得项目所需的精确内容。

生成快速入门配置主题

  1. 可选地修改 quick-start.theme 值。
    • Windows:.\themebuilder\examples\quick-start\quick-start.theme
    • Mac:./themebuilder/examples/quick-start/quick-start.theme
  2. 生成主题。
    • Windows:.\themebuilder\bin\themer.bat .\themebuilder\examples\quick-start\quick-start.theme
    • Mac:./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme
  3. 在运行 themer 命令的同一目录中查找生成的 quickstart.jar 主题。

Maven Jar 主题

maven-jar/ - 这是一个从“快速入门”主题继承的示例 Maven 项目。运行 mvn install 从配置中读取并构建主题所需的整个 jar 文件,将其安装在您的本地存储库中。这基于用于生成“Neptune 主题”的 pom.xml

生成 Maven Jar 主题

  1. 可选:修改名为 themeDetails.thememaven-jar 目录中的主题。
  2. 更改到 maven-jar 目录。
    • Windows:cd .\themebuilder\examples\maven-jar
    • Mac:cd ./themebuilder/examples/maven-jar
  3. 通过运行 mvn install 生成主题。
  4. 在名为 sample-theme-1.0.0-SNAPSHOT.jar 的 target 目录中查找生成的主题。

Maven 源代码

maven-source/ - 这是一个 Maven 项目,可让您将一组源文件生成到 src/ 目录中,您可以在其中直接修改它们。要重置回初始设置或使用新版本的 GXT 进行更新,只需重新运行 mvn install -Pgenerate 命令即可更新源并重新应用您需要的更改。这使您可以版本控制您自己的更改,并在生成的主题之上进行。

生成 Maven 源代码主题

  1. 可选:修改名为 themeDetails.thememaven-source 目录中的主题。
  2. 更改到 maven-source
    • Windows:cd .\themebuilder\examples\maven-source
    • Mac:cd ./themebuilder/examples/maven-source
  3. 通过运行 mvn install -Pgenerate 生成主题源。
  4. 修改 src/main/java 中的任何源以适合您的特定需求
  5. 通过运行 mvn install 生成主题 jar 文件。
  6. 在名为 sample-theme-1.0.0-SNAPSHOT.jar 的 target 目录中查找生成的主题。
  7. 如果稍后运行 mvn install -Pgenerate,它将将源恢复到其原始状态。

使用主题

生成主题后,只需复制 jar 文件并将其添加到库的类路径中。然后将其添加到 GWT 模块。

inherits 中使用的主题包命名源自主题配置中的 basePackage 属性。

  1. 生成主题。
  2. 在项目的根目录中创建一个 MyGxtProject40/lib 库文件夹。(lib 名称可以更改。)
  3. 将生成的主题 quickstart.jar 复制到 MyGxtProject40/lib 文件夹。
  4. 通过将 <inherits name="com.example.Theme" /> 添加到 MyGxtProject40.gwt.xml 配置来添加主题。

来自 MyGxtProject40.gwt.xml 的示例代码段。

    <!-- <inherits name='com.sencha.gxt.theme.blue.Blue'/> -->
    <!-- <inherits name='com.sencha.gxt.theme.gray.Gray' /> -->
    <!-- <inherits name="com.sencha.gxt.theme.neptune.Theme" /> -->
    <inherits name="com.example.Theme" />

使用生成的主题的示例 MyGxtProject40.gwt.xml 配置。

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE module PUBLIC "-//Google Inc.//DTD GWT 2.7.0//EN"
        "http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">

      <!-- Inherit the core Web Toolkit stuff. -->
      <inherits name='com.google.gwt.user.User' />

      <!-- Other module inherits -->
      <inherits name='com.sencha.gxt.ui.GXT' />
      <inherits name='com.sencha.gxt.chart.Chart' />

      <!-- GXT Stylesheet -->
      <stylesheet src="reset.css" />

      <!-- <inherits name='com.sencha.gxt.theme.blue.Blue'/> -->
      <!-- <inherits name='com.sencha.gxt.theme.gray.Gray' /> -->
      <!-- <inherits name="com.sencha.gxt.theme.neptune.Theme" /> -->
      <inherits name="com.example.Theme" />

      <!-- Specify the app entry point class. -->
      <entry-point class='com.sencha.gxt.test.client.MyGxtProject40EntryPoint' />

      <!-- Specify the paths for translatable code -->
      <source path='client' />
      <source path='shared' />

      <!-- <set-configuration-property name="CssResource.style" value="pretty" /> -->
    </module>

从 3.x 升级到 4.x

4.0 中添加了新属性。从旧的主题配置文件升级时,输出将列出缺少的属性。

运行主题构建器并查找缺少属性的示例

    $ ./themebuilder/bin/themer.sh ./themebuilder/examples/quick-start/quick-start.theme
    Exception in thread "main" com.sencha.gxt.themebuilder.ConfigHandler$ConfigError: Configuration Errors: 
    Missing property: theme.details.field.radio
    Missing property: theme.details.field.radio.boxLabel
    Missing property: theme.details.field.radio.boxLabel.size
    Missing property: theme.details.field.radio.boxLabel.family
    Missing property: theme.details.field.radio.boxLabel.color
    ... 

错误

缺少 Theme.gwt.xml

如果应用程序尝试访问尚未生成的主题,则会发生此错误。运行主题构建器以生成缺少的主题,并确保主题 jar 文件在类路径中可用。

Super Dev Mode starting up
   workDir: /var/folders/x8/9wz7qtw96t7grkdyjw1l61p40000gn/T/gwt-codeserver-1988045627584289815.tmp
Loading modules
   com.example.project.MyThemeSandbox
   Loading inherited module 'com.example.project.MyThemeSandbox'
      Loading inherited module 'com.example.project.MyThemeSandbox'
         Loading inherited module 'com.example.project.Theme'
      Loading inherited module 'com.example.project.Theme'
            [ERROR] Unable to find 'com/example/project/Theme.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
         [ERROR] Unable to find 'com/example/project/Theme.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
[ERROR] shell failed in doStartup method

GXT 4.x

Ext JS
ExtAngular
ExtReact
ExtWebComponents
Sencha Test
Cmd
Architect
Themer
IDE Plugins
Sencha Inspector
Fiddle
GXT
Sencha Touch
WebTestIt
Sencha GRUI
Rapid Ext JS
ReExt