主题编辑器概述
许多类在使用配置对象创建（实例化）类时具有用于快捷方式的名称。快捷方式名称称为别名（如果类扩展 Ext.Component，则称为xtype）。对于适用的类，别名/xtype 会列在类名称旁边以便快速参考。
框架类或其成员可以指定为私有或受保护。否则，类/成员为公有。公有、受保护和私有是访问描述符，用于传达如何以及何时使用类或类成员。
公有类和类成员可供任何其他类或应用程序代码使用，并且可以依赖于主要产品版本中的稳定性和持久性。公有类和成员可以通过子类安全地进行扩展。
受保护类成员是稳定的公有成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地进行扩展。
私有类和类成员在框架内部使用，不打算供应用程序开发人员使用。私有类和成员可以在没有任何通知的情况下随时从框架中更改或省略，并且不应在应用程序逻辑中依赖它们。
static标签。*请参见下面的静态。下面是一个示例类成员，我们可以对其进行剖析以显示类成员的语法（在本例中，从 Ext.button.Button 类中查看的 lookupComponent 方法）。
让我们看看成员行的每个部分
lookupComponent）( item )）Ext.Component）。对于不返回 undefined 以外任何内容的方法，可以省略此内容，或者可能显示用正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，则方法可能返回 Component，如果失败则返回 false，将显示为 Ext.Component/Boolean）。PROTECTED - 请参见下面的标志部分）Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员是从祖先或混合类继承的，则显示为灰色。查看源）item : Object）列出。undefined 以外的值，则“返回”部分将注明返回的类或对象类型以及描述（在此示例中为 Ext.Component）自 3.4.0 起可用 - 示例中未显示）默认为：false）API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();false，则标记为可预防的事件将不会触发- 表示框架类
- 单例框架类。*有关更多信息，请参见单例标志
- 组件类型框架类（Ext JS 框架中任何扩展 Ext.Component 的类）
- 表示类、成员或指南在当前查看的版本中是新的
- 表示类型为 config 的类成员
- 表示类型为 property 的类成员
- 表示类型为 method 的类成员
- 表示类型为 event 的类成员
- 表示类型为 theme variable 的类成员
- 表示类型为 theme mixin 的类成员
- 表示类、成员或指南在当前查看的版本中是新的
在 API 文档页面的类名下方是与当前类拥有的成员类型相对应的按钮行。每个按钮按类型显示成员数（此计数会随着应用筛选器而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，位于其使用的配置下方。Getter 和 Setter 方法文档将位于配置行中，以便于参考。
您的页面历史记录保存在本地存储中，并显示在顶部标题栏正下方（使用可用空间）。默认情况下，仅显示与您当前查看的产品/版本匹配的搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将在历史记录栏中显示所有产品/版本的所有近期页面。
在历史记录配置菜单中，您还将看到最近访问的页面列表。结果按“当前产品/版本”和“全部”单选按钮进行筛选。单击 按钮将清除历史记录栏以及保存在本地存储中的历史记录。
如果在历史记录配置菜单中选择了“全部”，则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也将以工具提示的形式显示产品/版本。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上，还有一个筛选器输入字段，用于使用筛选器字符串筛选成员行。除了按字符串筛选外，您还可以按访问级别、继承和只读筛选类成员。这是使用页面顶部的复选框完成的。
API 类导航树底部的复选框筛选类列表以包括或排除私有类。
单击空的搜索字段将显示您最近的 10 次搜索，以便快速导航。
每个 API 文档页面（Javascript 基本类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将包含以下一个或多个
Ext.button.Button 类的备用类名为 Ext.Button）。备用类名通常用于保持向后兼容性。默认情况下，可运行的示例（Fiddles）在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
默认情况下，类成员在页面上折叠。您可以使用成员行左侧的箭头图标或使用右上角的展开/折叠所有切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器中查看文档将导致针对较小尺寸优化视图。桌面视图和“移动”视图之间的主要区别是
可以通过单击 API 文档页面顶部的类名来查看类源。可以通过单击成员行右侧的“查看源”链接来查看类成员的源。
在本指南中，我们将了解 Sencha Themer 并探索其许多高级主题功能。Themer 允许您轻松创建、修改和共享主题，然后可以将其添加到 Ext JS 应用程序中。所有这些都是通过图形用户界面完成的，无需编写任何代码。Sencha Themer 使您可以访问现代和经典工具包的所有 Ext JS 组件，以及用于设置细粒度样式和生成带有动态样式表的主题包的检查工具。
让我们从了解主题创建过程开始。
在 Ext JS 中创建自定义主题一直是一项挑战。但借助 Sencha Themer，我们消除了所有猜测，并添加了一个简单的图形界面来自定义应用程序的任何方面。
如下所示，入门非常容易。只需为主题命名，指向您的应用程序、工作区或空目录，然后选择您希望用作基础的主题。您甚至可以选择自己的自定义主题作为扩展的起点。
完成选择后，只需点击“创建主题”，您就可以为现代和经典工具包应用程序做好准备了。
创建主题后，您可以立即将其附加到应用程序。在通过时尚开关启用了“sencha app watch”的情况下，您甚至可以在通过 Themer 界面修改主题时看到应用程序发生变化。
您可以通过从顶部菜单中选择“发布”来将主题附加到应用程序。选择“将主题应用到应用程序”然后从菜单中选择您的应用程序。通过单击“应用到所选”来应用您的主题。
如果时尚通过 sencha app watch 运行，您可以在 Themer 中更改变量时看到应用程序发生变化。要启动时尚，请发出以下命令之一
从您的 CLI 发出以下命令
sencha app watch -fashion classic
然后您可以在以下位置访问您的应用程序
从您的 CLI 发出以下命令
sencha app watch -fashion modern
然后您可以在以下位置访问您的桌面应用程序
http://localhost:1841?toolkit=modern
或者，如果您在 Chrome 开发者工具中启用了设备模式，则可以在以下位置查看设备视图
注意：如果您在其他地方运行“sencha app watch”，您的端口可能会有所不同。查看“sencha app watch”的终端输出以获取正确的 URL。
Themer 的 GUI 可以分为三个主要区域。
组件树
画布/预览
编辑器
组件树包含所有可供编辑的组件。此树根据您选择的工具包而有所不同。
画布直观地显示可供编辑的组件的模型，具体取决于您的组件树选择。它还会更新以显示您在编辑器中进行修改的那些组件。
画布树还包含一个检查器，将在后面的部分中讨论。
编辑器面板包含所有可以根据您的组件和画布/预览选择当前更改的样式。除非您已更改它们，否则它将始终包含您在创建时扩展的主题所决定的默认值。
有多种方法可以更改值。有时会有文本框、滑块、选择框等。一个特殊功能是颜色选择工具。
您始终可以在颜色文本字段中输入十六进制代码，但还有其他几种选择颜色的方法。
如果您单击颜色框，它最初会显示您的基本颜色、主体背景颜色和字体颜色。您还将看到以 +/- 5% 为增量的较浅和较深的选项，这些选项应作为应用程序的强调色。
中间最大的强调框包含您当前的基本、背景和文本颜色。
第二个选项卡包含基于材质设计的建议。如果您没有设计规范并且尝试根据精心策划的基于材质的颜色和增量列表找到合适的调色板，这是一个很好的起点。
第三个选项卡包含最常用的颜色选择工具。它允许您根据十六进制、色调、渐变颜色选择器等直接输入颜色。
并非我们应用程序的所有可变方面都显而易见。在某些情况下，我们需要使用“检查”工具来发现组件的某些可编辑属性。
选项卡是受益于检查模式的组件的一个很好的例子。当您选择检查然后单击某个选项卡时，您就可以修改该选项卡的不同状态，这些状态可能之前不可见。例如，激活选项卡、选项卡上、悬停选项卡等在激活检查模式并单击选项卡后可编辑。
检查模式还有另一个方便的功能，允许您“锁定”您希望编辑的状态。例如，如果您想编辑悬停状态，您将无法同时悬停和编辑。在这种情况下，您可以将鼠标悬停在选项卡上以激活其悬停状态，然后在 Mac 上按“Cmd + I”，或在 Windows 和 Linux 上按“Ctrl + I”。
这将启用检查模式并冻结中心窗格（画布）的状态。您现在可以检查选项卡并修改覆盖状态。只需取消单击“检查”即可退出此锁定状态。
Themer 可以轻松创建自定义主题，使用主题对所有组件应用样式更改。但是，您可能希望特定样式仅应用于选定的组件实例。这就是组件 ui 配置派上用场的地方。ui 配置将主题混合样式应用于给定的组件子类/实例。在 Themer 中，您可以为所有 Ext JS 6.2+ 应用程序创建自定义 UI 样式。
注意：在 Themer 外部创建的 UI 可能无法在 Themer 内进行管理/编辑。只有在 Themer 内创建的 UI 才会显示用于主题化。
要创建自定义 UI
单击左侧组件树中“UI”节点右侧的“+”以打开“添加 UI”窗口
选择您要为其创建 UI 的组件（组件列表会根据您使用的是经典主题还是现代主题而有所不同）。您可以使用“搜索混合...”字段过滤组件列表。
在“名称”字段中添加 UI 名称。按照惯例，UI 名称应代表 UI 旨在实现的目标，但可以是任何有效的 CSS 名称。
单击“创建 UI”
创建 UI 后，它将显示在组件树中的“UI”下，并且将被选中。UI 的所有可用配置选项将显示在右侧的属性面板中，与组件本身相同。
在根据需要编辑组件 UI 后，您将把 UI 添加到选定的组件子类/实例中以查看 UI 的实际效果。例如，如果您要创建一个“green-btn”UI，其中按钮的背景和边框为绿色，那么您将把“green-btn”添加到您希望显示为绿色的应用程序中的任何按钮实例。
{
xtype: ’button’,
text: ’Go on...’,
ui: ’green-btn’
}
Themer 还允许您使用 Web 字体。我们将针对此特定显示逐步介绍 Google 字体。在更改字体之前，您需要获取 Google 字体 URL。转到相应的 Google 字体页面，并复制 Web 链接。结果链接应类似于以下内容
https://fonts.googleapis.com/css?family=Raleway
然后，在 Themer 中，从顶部菜单中选择“工具”，然后选择“管理 Web 字体”。粘贴 URL 并单击“完成”。
最后，单击左侧组件树中的“主题默认值”。从字体部分选择新添加的“Raleway”。您的应用程序应立即更新。
Themer 可以轻松导出您完成的自定义主题，以便与其他 Ext JS 应用程序一起使用。
对主题的外观和感觉满意后，请导出它！要导出您的主题，只需从顶部 Themer 菜单中选择“发布”，然后选择“将主题导出为 Zip 存档”。
您的主题现在可以与其他用户及其应用程序共享了！
Themer | 使用条款