文档帮助

术语、图标和标签

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

访问级别

框架类或其成员可以指定为 private 或 protected。否则，类/成员为 public。Public、protected 和 private 是访问描述符，用于传达类或类成员应如何以及何时使用。

Public 类和类成员可供任何其他类或应用程序代码使用，并且在主要产品版本中可以作为稳定和持久的依赖项。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public 成员，旨在由拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用，不供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中省略，恕不另行通知，并且不应在应用程序逻辑中依赖。

成员类型

Config - 类的配置选项。
Property - 一旦类被实例化就设置。*见下文只读。
Method - 类可以执行的操作。方法应理解为实例方法，并且只能从给定类的实例调用。可以从类本身直接调用的静态方法将在方法名称旁边带有 static 标签。*见下文静态。
Event - 事件是框架事件系统特有的，允许类以编程方式引发事件，以便由一个或多个事件处理程序方法处理。DOM 事件虽然由框架事件系统处理，但在 API 文档中没有具体描述。*对于 DOM 事件，请参阅 MDN 的事件参考页面。
Theme Variable - 框架使用的视觉主题引擎使用的变量。
Theme Mixin - 框架使用的视觉主题引擎使用的函数，并且可以使用在各种主题变量中设置的值。

成员语法

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

Ext.container.Container

查看源代码

lookupComponent ( item ) : Ext.Component

受保护

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

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

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

参数

item : Object

正在添加的配置对象。

返回值

Ext.Component

要添加的组件。

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

展开/折叠 - 成员行的左侧是一个控件，用于展开和折叠每个成员行以显示/隐藏成员详细信息。
成员名称 - 类成员的名称（在本例中为 lookupComponent）
方法参数 - 方法使用的任何必需或可选参数（或传递给事件处理程序方法的参数）都将列在方法名称旁边的括号内（在本例中为 ( item )）
返回类型 - 方法或属性返回的类实例或 javascript 对象（在本例中为 Ext.Component）。对于除了 undefined 之外不返回任何内容的方法，可以省略此项，或者可以显示为由正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，则方法可能返回 Component，如果失败，则返回 false，这将显示为 Ext.Component/Boolean）。
标志 - 任何适用于该成员的标志都将显示在旁边（在本例中为 PROTECTED - 请参阅下面的标志部分）
成员来源 - 成员行的右侧是最初描述该成员的类（在本例中为 Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接，如果成员继承自祖先类或混合类，则显示为灰色链接。
成员源代码 - 成员来源类右侧下方是查看成员源代码的链接（示例中为 view source）
参数列表 - 类方法的每个参数都将使用与上面括号中找到的名称相同的名称、期望的类或对象类型以及参数的描述列出（示例中为 item : Object）。
返回值 - 如果类返回除 undefined 之外的值，则“返回值”部分将注释返回的类或对象类型以及描述（示例中为 Ext.Component）
Since（示例中未显示） - 某些成员将显示该成员首次引入的产品版本（即 Available since 3.4.0 - 示例中未显示），紧接在成员描述之后
Default（示例中未显示） - Config 通常显示要应用于类实例的默认配置值（如果未被覆盖）（即 Defaults to: false）

成员标志

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

Required - 实例化类时需要的配置
Bindable - 配置具有 setter，允许通过 ViewModel 绑定设置此配置
Read Only - 该属性可以读取，但不能用于在运行时配置/重新配置类实例
Singleton - Singleton 类在定义后立即实例化，不能手动实例化
Static - 静态方法或属性是属于类本身的方法或属性，而不是类的实例
Chainable - 指的是在调用时返回类实例的方法。
这使得可以进行链式方法调用，例如：classInstance.method1().method2().etc();
Deprecated - 计划在未来框架版本中删除的类或成员，在当前版本中提供以实现向后兼容性。
已弃用的类和成员将有一条消息，指导您将来要使用的首选类/方法。
Removed - 已删除的类或成员，仅在文档中作为在框架版本之间升级的用户的参考而存在
Template - 在基类中定义的方法，旨在由子类重写
Abstract - 类或成员可以定义为抽象的。抽象类和成员建立类结构并提供有限的（如果有的话）代码。特定于类的代码将通过子类中的重写来提供。
Preventable - 如果从事件处理程序返回 false，则标记为可阻止的事件将不会触发

类图标

- 表示框架类

- 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 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

备用名称 - 一个或多个附加的类名同义词（在 Ext JS 6.0.0 中，Ext.button.Button 类具有 Ext.Button 的备用类名）。备用类名通常是为了向后兼容性而维护的。
层次结构 - 层次结构视图列出了当前类的继承链，向上遍历其祖先类，直至根基类。
Mixins - 混合到当前类中的类列表
继承的 Mixins - 混合到当前类的祖先中的类列表
Requires - 类实例化所需定义的所有类
Uses - 类在其生命周期中的某个时刻可能使用的类列表，但不是类最初实例化所必需的
Subclasses - 扩展当前类的类

展开和折叠示例及类成员

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

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

桌面 -vs- 移动视图

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

全局导航将位于左侧的菜单中，可通过汉堡菜单图标访问。菜单包含以下内容（在大多数页面上）
- 当前产品的名称（作为产品着陆页的链接）
- 用于导航回文档主页的 Sencha 图标
- 产品菜单下拉按钮
- API 文档和指南的导航树选项卡
当前上下文导航和工具位于右侧，可通过齿轮图标访问。上下文菜单包含以下内容
- 全局搜索输入字段
- （API 文档）带有成员过滤器、“展开/折叠所有示例”按钮、“展开/折叠所有成员行”按钮、访问级别过滤器复选框和每个成员计数的“过滤器”选项卡
- （API 文档）包含与当前类相关的元数据菜单的“相关类”选项卡
- （指南）指南的目录

查看类源代码

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

GXT 4.x

显示私有类

顶部

生成主题

随着 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.theme、myconfig-tools.theme、myconfig-window.theme 等。

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

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

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

自定义图标

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

图标命名可以像 icon.svg、iconOver.svg 或 iconClick.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.theme 或 triton.theme 配置文件来 Fork Neptune 主题。

Mac

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

Windows

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

快速入门示例

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

骨架配置主题

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

生成骨架配置主题

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

快速入门主题

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

生成快速入门配置主题

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

Maven Jar 主题

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

生成 Maven Jar 主题

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

Maven 源代码

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

生成 Maven 源代码主题

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

使用主题

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

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

生成主题。
在项目的根目录中创建一个 MyGxtProject40/lib 库文件夹。（lib 名称可以更改。）
将生成的主题 quickstart.jar 复制到 MyGxtProject40/lib 文件夹。
通过将 <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

目录

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例及类成员

桌面 -vs- 移动视图

查看类源代码

GXT 4.x

目录

生成主题

参考

要求

Sencha 专业服务

运行 Themer

Runner 选项

Maven 启动器选项

多配置文件支持

自定义图标

Windows Runner

Mac Runner

控制台输出

自定义 Neptune 或 Triton 主题

Mac

Windows

快速入门示例

骨架配置主题

生成骨架配置主题

快速入门主题

生成快速入门配置主题

Maven Jar 主题

生成 Maven Jar 主题

Maven 源代码

生成 Maven 源代码主题

使用主题

从 3.x 升级到 4.x

错误

缺少 Theme.gwt.xml

GXT 4.x