应用程序样式

什么是应用程序样式

应用程序样式是指用户对组件外观和感觉的调整。这些调整可能包括：颜色、颜色渐变、字体、边距/内边距等。可以通过 Architect 以多种方式实现此目的。

你可以

• 修改应用于项目的主题
• 创建描述组件样式的自定义 CSS 规则
• 使用 JavaScript 直接设置组件的样式

本指南主要关注前两点。在开始之前，我们先来定义样式和主题之间的区别。

样式是一个全局术语，它包括主题，还包括对 CSS 的直接更改。这些更改在项目中作为独立资源实现。

主题涉及对 Ext JS 主题 SCSS 的修改。可以通过修改变量、创建组件 UI 或添加其他覆盖来修改主题 SCSS。然后将主题编译为可以应用于项目的包。

每个 Sencha 框架都附带许多可以在应用程序中使用的主题。Architect 使您能够通过以下任何方式将主题应用于应用程序

1. 在 Architect 外部开发主题，使用 Sencha Cmd 编译它，然后将定义主题的结果 CSS 文件作为 CSS 资源 包含在 Architect 项目中。

2. 在工具箱中选择一个框架主题，将其添加到项目中并应用它。项目可以包含任意数量的主题，但一次只能应用一个主题。

3. 通过在项目中选择主题资源来自定义工具箱主题。然后，您将能够查看定义主题外观的所有变量，按组件组织。此外，可以为支持它们的组件创建新的 UI。然后，您可以通过添加自定义 SCSS 资源来扩展这些 UI。这些更改会立即编译，并且可以在 Architect 画布中预览。

4. 将主题保存到工具箱或将其导出到外部文件，以便其他项目和用户可以使用它。

使用 CSS 资源

CSS 资源只是一个 CSS 文件，其中包含视图组件的自定义样式。要添加 CSS 资源，请在工具箱中找到它并将其添加到项目中的资源中。添加 CSS 资源后，将其 URL 配置设置为 CSS 文件的位置。

通常最好给 URL 配置一个相对于主 app.html 文件的路径。使用相对路径允许您在 Architect 的代码编辑器中编辑文件的内容。只需在检查器中选择 CSS 资源并切换到代码视图。然后，您可以编辑 CSS 代码以更新目标 .css 文件并将其重新应用到画布上。如果在指定的本地路径中不存在文件，Architect 会在您保存或构建项目时创建该文件。

配置 CSS 资源后，Architect 会尝试加载。如果成功，Architect 会将您的自定义 CSS 应用到画布上，以便您在设计应用程序时看到自定义样式。如果您的 CSS 文件以 Architect 之外的某种方式被修改，您可以通过单击画布上方的“刷新 CSS”按钮重新加载并将其重新应用到画布上。

通过在画布中加载和应用 CSS，您的自定义样式可能会覆盖基本框架样式。这可能会破坏画布上组件的显示。在大多数情况下，CSS 样式优先，因为它们是在主题和框架样式之后应用的。我们建议使用框架中没有的 CSS 类。这消除了与基本 CSS 冲突的可能性。

Ext JS 主题

Sencha 框架都附带一系列主题，可以应用于使用 Ext JS 4.2+ 构建的应用程序。

以下主题可用于 Sencha Ext JS 项目

Ext JS 4.2

• 经典 - 经典蓝色 Ext JS 主题。

• 灰色 - 扩展“ext-theme-classic”。与经典相同，但带有灰色色调。

• 访问 - 无障碍主题。扩展“ext-theme-classic”。这是一个为 Ext JS 4.2 WAI-ARIA 无障碍要求创建的传统主题。它保留了向后兼容性，但被 aria 主题取代。

• Neptune - 现代无边框主题。扩展“ext-theme-neutral”。此主题经过专门设计，易于修改，最适合作为自定义主题的基础。

Ext JS 5

• 经典 - 经典蓝色 Ext JS 主题。

• 灰色 - 扩展“ext-theme-classic”。与经典相同，但带有灰色色调。

• Neptune - 现代无边框主题。扩展“ext-theme-neutral”。此主题经过专门设计，易于修改，最适合作为自定义主题的基础。

• Neptune Touch - 与 Neptune 相同，但包含用于触摸屏设备的放大组件。

• Crisp - 现代简约主题。扩展“ext-theme-neptune”。

• Crisp Touch - 与 Crisp 相同，但包含用于触摸屏设备的放大组件。

• ARIA - 无障碍主题。扩展“ext-theme-neptune”。

Ext JS 6 Classic Toolkit

• 经典 - 经典蓝色 Ext JS 主题。

• Gray - 扩展“theme-classic”。与 classic 相同，但带有灰色色调。

• Neptune - 现代无边框主题。扩展“theme-neutral”。此主题经过专门设计，易于修改，最适合作为自定义主题的基础。

• Neptune Touch - 与 Neptune 相同，但包含用于触摸屏设备的放大组件。

• Crisp - 现代简约主题。扩展“theme-neptune”。

• Crisp Touch - 与 Crisp 相同，但包含用于触摸屏设备的放大组件。

• ARIA - 无障碍主题。扩展“theme-neptune”。

• Triton - 现代无边框主题。扩展“theme-neptune”。此主题经过专门设计，易于修改，最适合作为自定义主题的基础。

Ext JS 6 Modern Toolkit

• Windows Phone - 适用于 Internet Explorer 10 及更高版本设备（如 Windows Phone 和 Microsoft Surface）的主题。

• Cupertino - 基于 iOS7+ 的设备主题。

• Neptune Touch - 现代无边框主题。扩展“theme-neutral”。包含用于触摸屏设备的放大组件。

• MountainView - 基于 Android 的设备主题。

• Triton - 现代无边框主题。扩展“theme-neptune”。此主题经过专门设计，易于修改，最适合作为移动设备的自定义主题的基础。

主题继承结构

Ext JS 主题继承

Ext JS 主题在包中进行组织，并且具有层次结构。“theme-base”是基础主题，其中包含框架组件的布局信息。“theme-neutral”继承自“theme-base”，并为所有组件配置全局变量和规则。其他所有主题都以某种方式从“theme-neutral”扩展而来。

此外，Ext JS 还包含一个用于触摸大小调整的子包，该子包可帮助“theme-neptune-touch”和“theme-crisp-touch”调整触摸屏设备的组件大小。

下表应有助于您了解 Ext JS 中的主题继承工作原理。

有关 Ext JS 主题的更多信息，请参阅 Ext JS 主题指南

QuickThemes

Quick Themes 允许您只需单击几下即可创建一些主题的全面变体。这可防止您必须自定义每个组件，从而提供了一条更清晰的简单主题路径。

Ext JS 中提供了以下 Quick Themes

Ext JS 4.2 QuickThemes

• Neptune

Ext JS 5+ QuickThemes

• Neptune

• Neptune Touch

• Crisp

• Crisp Touch

应用主题

所有框架主题、自定义添加的主题和 Quick Themes 都可以在工具箱中的“主题”下找到。您可以通过以下任何方式将主题从工具箱应用到您的项目

• 将主题拖动到画布面板的空白区域

• 将主题拖动到检查器面板的资源节点。

• 在检查器面板中选择资源节点，然后双击主题。

将主题添加到项目后，Architect 会询问您是否要将此主题应用到您的项目。

您可以在项目中包含任意数量的主题，但任何给定时间只应用一个主题。要应用不同的主题，请在检查器面板中右键单击它并选择“应用主题”。您可以以相同的方式从项目中删除或复制主题。

您可从工具箱轻松自定义项目中的主题资源。您还可以通过修改库中theme配置的值来应用不可自定义的框架主题。只需选择一个框架主题。内置主题将显示在列表顶部，任何其他自定义主题将显示在底部。

注意：如果您已从工具箱向项目应用了主题，则更改theme配置不会将其从项目中删除。它只是不再被应用。在库中设置theme配置与应用自定义主题的效果相同。

自定义主题

开始之前，请注意您无法为 Ext JS 4.2 之前的框架版本创建自定义主题。

以下是自定义主题的一般步骤

1. 如前所述，向您的项目应用 Sencha 定义的一个主题。

2. 在项目检查器中选择此主题。它将显示一个名称，如“MyCrispTheme”。您可以通过修改配置面板中的文件名来重命名主题。

3. 单击“主题”手风琴标题以显示按组件分组的全局变量列表。这些变量可根据需要进行修改以自定义您的主题。更改全局变量将影响所述组件的所有实例的外观。如果您想修改组件的单个实例，请参阅下面的 UI 部分。

导出或保存您的主题

定义并命名自定义主题后，在项目检查器窗口中右键单击主题以获取一个下拉菜单，该菜单允许您将主题保存到工具箱或将其导出到可与其他用户共享的文件。

当您将自定义主题保存到工具箱时，您会看到一个弹出窗口，您可以在其中定义主题的显示名称以及将使用的类别和组

当您将自定义主题导出到文件时，您会看到一个弹出窗口，您可以在其中定义文件名和将写入.xdc文件的位置。

另一个用户可以下载此文件，然后使用“编辑”菜单栏项上的“导入组件”链接导入它。

排除您的主题

如果您不想将 Architect 主题包含在项目中，请按照以下简单步骤操作。

1. 选择库资源并选择内置主题，例如经典或默认。
2. 取消选中包含 CSS 框。

修改全局变量

您可以通过更改全局变量的值来自定义主题的许多方面。

选择“主题”手风琴后，单击列出的任何类名左侧的三角形以显示该组件的全局变量。

每个变量名称都相当不言自明，但其中大多数还带有带有更详细解释的工具提示。变量名称还记录在 Ext JS API 参考页面的“CSS 变量”部分下。

除了网格中列出的可读“显示名称”外，每个变量还有一个“真实名称”或“scss 名称”。此类变量值的语法以 $ 符号开头（例如基本颜色变量的 $base-color）。这是一个变量引用，可用于将变量链接在一起。如果两个变量的类型相同，您可以在另一个变量的值字段中使用其中一个的 scss 名称。

为 Ext.Class 和 Ext.Component 定义的变量是根级别的。这些变量不会直接修改组件，但由于它们的派生类，更新它们可以改变主题的整体外观。

组件变量通常不应引用为其他组件定义的变量，除非所述组件彼此继承。

查找变量

您可以通过使用筛选面板搜索以下任何命名方案来查找和修改您要更改的变量

• 类名
• 变量名
• $variable-real-name
• value:variable-value
• val: variable-value
• type:variable-type（字符串、颜色、数字）

选择变量后，您可以添加一个新值。可接受的值取决于变量类型。如果您输入不可接受的值，编译器通常会在编译时给出错误。我们将在下面讨论一些不同的变量类型。

变量值分配

颜色变量

颜色变量具有一个集成的颜色选择器，该选择器还显示当前颜色值的预览。

单击颜色以启动颜色选择器，为项目中的组件设置不同的颜色。

我们将在本指南的后面部分讨论颜色选择器。

渐变变量

渐变变量具有一个集成的渐变选择器，该选择器还显示当前渐变和渐变曲线的预览。渐变是针对为同一组件选择的颜色执行操作的函数，并以灰色进行预览。但是，应用后，渐变将显示正确的颜色。

颜色渐变指定用于逐步填充区域的一系列颜色。

Ext JS 渐变

字体系列变量

字体系列变量具有许多可以选择的预设字体。这些是常见的网络安全字体系列。但是，可以手动输入任何其他字体或字体系列组合。

在应用程序中使用网络字体

1. 在代码编辑器中编辑 css/scss 文件，以使用包含网络字体的 @font-face 规则。

2. 通过打开配置选项卡并在 SCSS 行右侧单击“+”号，在项目中的主题资源下添加一个 SCSS 段。

3. 设置 compile/include 顺序，以便 SCSS 段在主题的其余部分之前运行。为此，单击“SCSS 资源”行上的箭头以添加“编译顺序”行。从下拉菜单中选择 beforeVariables。

1. 将网络字体代码添加到项目中。

按照上述步骤操作后，你应该能够将任何已安装字体的字体名称用作主题中任何字体系列变量的值。

主题编译

默认情况下，每次修改变量时都会重新编译主题。你将注意到配置面板底部有一个编译进度条。如果为任何变量分配了无效值，编译器会发出警告。

你可以通过单击进度条左侧的“A”按钮关闭自动编译功能。然后，你可以通过单击“A”按钮和进度条之间的按钮来执行手动编译。

编译栏显示在配置面板的底部。

当编译栏为橙色（如上所示）时，自动编译已关闭，并且自上次编译运行以来已修改变量值。

当编译栏为红色时，表示编译错误。

已修改的变量

列出的每个主题和 UI 变量在修改后都会获得一个复选框。切换此复选框可让你快速比较组件的原始外观和修改后的组件值。

网格中的每个变量都处于三种可能状态之一，由左边缘的指示栏标识

• 默认状态（指示栏为灰色）– 变量设置为默认值，复选框不可见。

• 启用状态（指示栏为蓝色）– 你已修改此变量的值。复选框中出现一个勾号。你可以单击勾号转到禁用状态。切换启用和禁用状态可让你快速比较两个值。

• 禁用状态（指示栏为橙色）– 你已修改此变量的值，但已将其切换为关闭状态。这意味着在编译主题时，你的值不会是用户定义的，而是编译为默认状态。

在启用和禁用状态下，为变量显示的值是用户分配给它的值。

要恢复变量的原始值，请右键单击变量名称，然后从下拉菜单中选择重置。执行此操作后，变量处于默认状态。从视觉上看，显示默认值，指示栏为灰色，复选框不可见。

组件 UI

UI 有一组附加变量，这些变量会覆盖组件实例的基本变量，而主题中的全局变量对该组件的所有实例都有效。

应用主题时，你可以选择符合条件的组件。符合条件将通过 UI 手风琴标题栏的存在以视觉方式表示。配置面板还显示一个 UI 配置，其值为全局或默认。此状态取决于组件和框架，因为某些组件带有预制的框架 UI。

在 Ext JS 中更改 UI

支持 UI 的组件将具有 UI 配置。

例如，如果你使用的是默认的、不可修改的 Ext JS 主题之一，则主题化界面不可用。要以这种方式修改 UI 配置，你必须知道要使用的有效 UI 名称。

作为一个简单的示例，使用 Ext JS“左/上/下”布局模板打开一个项目。

1. 选择 leftPanel 组件。
2. 使用配置过滤器搜索ui。
3. 将 ui 配置的值从default更改为light。
4. 请注意，面板标题的背景变为白色，文本变为黑色。

创建自定义 UI

默认 UI 无法修改或删除。为了修改 UI，你需要创建自己的自定义版本。

要为组件创建自己的 UI，请单击“+”号添加新的 UI 类型。默认情况下，这些 UI 被命名为“Untitled {x}”。你可以通过单击 UI 面板最右侧的齿轮并输入弹出窗口中显示的所需名称来重命名 UI。如果所选组件不支持 UI，则不会显示 UI 下拉选择器和“+”按钮。

创建新的 UI 类型会导致显示所有相关变量。

在编译新 UI 后，你可以将新组件拖到画布或检查器中。最初，你选择的每个新组件都使用默认 UI 显示。要更改此设置，只需单击 UI 框右侧的箭头并选择新 UI。这会将你的自定义 UI 应用于如下所示的组件。

SCSS 资源

在某些情况下，你可能希望超越变量调整。

为了帮助实现这一点，Architect 中提供了两种类型的可修改 SCSS 资源

• 模板 SCSS - 可以添加到任何模板的 SCSS 段。这些段可帮助你设置数据生成内容的样式，例如列表、数据视图等。这些段属于模板，并且无论应用什么自定义主题都将存在。这些 SCSS 资源也包装在一个自定义类中，以便它们保持模板特定性，以避免 CSS 冲突。

• 主题 SCSS - 可以添加到任何主题根目录的 SCSS 段。

要添加 SCSS 资源，请选择一个模板或主题，然后单击配置窗格中SCSS配置旁边的 + 按钮。

在代码编辑器的工具栏中编辑 SCSS 资源时，有一些有用的操作可用

• 插入 Tpl 结构将以适当的 SCSS 语法从模板数据中插入 CSS 类名称，以便你可以更快地设置模板样式。

• 插入颜色将使用颜色选择器在编辑器中插入颜色。如果选择了颜色，则打开颜色选择器时该颜色将显示在颜色选择器中。

注意：Architect 通常会保护你，让你不必了解 SASS 的复杂性。也就是说，如果你需要访问此信息，你可以阅读SASS 参考指南。

此外，主题 SCSS 可以指定相对于主题其他部分的编译顺序。

• beforeVariables 在声明任何自定义主题变量之前包含 SCSS 资源。
• beforeFramework 在加载实际框架主题之前包含 SCSS 资源，但在 Architect 中设置的任何变量之后。
• afterFramework 在包含框架之后包含 SCSS 资源。这通常是你放置自己的 CSS 覆盖的最佳位置。

使用 Architect 颜色选择器

颜色选择器提供了一个可自定义的调色板，以帮助你在自定义主题时选择合适的颜色。

右上角的大方块显示当前分配的颜色调色板。你可以通过以下任何一种方式为调色板选择另一种基本颜色

• 将调色板显示中的色相滑块移动到所需的颜色。
• 调整 HSVA 滑块条，直到色相滑块指示所需的颜色。
• 单击显示下方方形颜色样本之一，以选择预制调色板或你显示的调色板。
• 在Hex字段中提供基本颜色的十六进制值。
• 在 RGB 字段中提供 RGB 值。并提供良好的对比度。
• 调色板正方形右侧的四列垂直色条是滑块栏，用于根据 HSV 系统 控制颜色的质量属性
  • 色相 – 基本颜色
  • 饱和度 – 色彩中色相的主导程度
  • 值（或亮度） – 颜色的整体强度或浓度
  • Alpha – 透明度

可以通过在色条上上下拖动光标或在每列底部方框中提供绝对值来调整这些值。你还可以使用调色板正方形下方的方框中 RGB 系统指定颜色。

当你修改调色器中的不同值时，主调色板显示正方形上的色相选择器会移动以显示当前选择的准确颜色；此颜色的较大色块也会显示在右上角的矩形中。

当你对结果满意时，单击“确定”按钮。这会自动更新变量的颜色，并使用新定义的颜色编译主题。窗口右下部分会显示一个进度条，以指示编译器的进度。编译完成后，画布中显示的项目组件将更改为使用新定义的调色板。

以下是修改自定义主题中颜色的其他一些提示

• 要复制 scss 名称，右键单击变量名称，然后从下拉菜单中选择“复制 SCSS 引用”。

• 如果使用调色器或手动设置有效的 CSS 颜色名称或十六进制值，则其值进行某种计算的变量将被绝对颜色值覆盖。

• 选择新颜色时，可以单击屏幕右下方的“添加”以将颜色色块正方形添加到显示中，或将颜色从右上角的颜色预览中拖动到调色板中以添加它。如果你想将其他变量设置为相同的调色板，则只需选择变量，然后单击表示该调色板颜色的颜色色块正方形即可。

• 你可以拖动调色板菜单中的色块来重新排列它们的显示方式。要从调色板中删除色块，请将其拖放到调色板外部。调色板菜单的内容在项目和框架之间保持不变。

图像变量

一些图标和图像与主题相关。例如，复选框和各种触发器的外观。选择一个主题并单击“图像”选项卡时，将显示关联图像的列表。单个图像可能由多个组件使用。

在样式中包含图像

Sencha Architect 使你能够在应用程序样式中包含图像。

附加图像组件

按钮和其他组件可以附加图像。

向组件添加图像

1. 将图像放置在项目树中 project/resources/ 目录下的有意义的位置。此目录中的图像可以在画布中呈现，并且 Ext JS 项目的预览和构建操作可以访问它们。

注意：有关 Architect 项目文件结构的更多信息，请参阅 项目文件。

1. 选择要附加图像的组件。

2. 转到配置面板并选择图标配置。

3. 提供包含图像的 .png 文件的 URL。使用相对于 mainapp.html 文件的路径可以为你提供最大的灵活性，尽管绝对路径名也可以使用。

创建图像容器

当你有一个徽标或其他图像想要在不同的视图中重复使用时，请使用该图像创建一个自定义组件

1. 将图像放置在项目树中 project/resources/ 目录下的有意义的位置。

2. 创建一个容器并选择它。

3. 转到配置面板并找到 html 配置。将此配置设置为 <img src="path/to/my/image.png"/> 等值。

4. 将组件的宽度和高度设置为与图像的宽度和高度匹配。

5. 将此容器另存为自定义组件。

你现在可以根据需要轻松拖放包含徽标的组件。

SCSS 中的图像

将图像放置在项目树中 project/resources/ 目录下的有意义的位置。

在 SCSS 代码中引用图像如下所示

url('project/resources/your-image-folder/your-image.png').