ExtJS自定义主题（theme）样式详解

下面我来为你详细讲解“ExtJS自定义主题（theme）样式详解”的完整攻略。

一、什么是ExtJS主题(theme)？

在 ExtJS 中，主题 (theme) 可以定义应用程序的整体外观，例如字体、颜色、样式等元素。主题有自己的文件及文件夹，其中包含了 CSS, images以及其他资源。

通过使用主题，我们可以快速地创建一个自定义的漂亮应用程序。

二、如何实现ExtJS主题样式定制？

要实现ExtJS主题定制，我们需要做以下几个步骤：

1. 复制现有ExtJS主题文件夹

首先，我们需要复制一个现有的主题文件夹，例如默认主题 neptune:

cp -R ext-6.2.1/packages/neptune/classic/ custom_theme

2. 修改主题变量

在custom_theme/sass/var目录下，我们可以找到一些 sass 文件，这些文件定义了一些 ExtJS 变量，例如颜色、字体等。我们可以修改这些变量来定制主题。例如，我们可以在 custom_theme/sass/var/defaults文件中定义一些新的变量：

$base-color: #8B0000;
$background-color: #FFF;
$foreground-color: $background-color;
$panel-header-color: #2F4F4F;

这将会改变主要区域的颜色和涉及到的其他样式变量。

3. 构建主题

构建主题需要使用 Sencha Cmd。在 custom_theme 目录下执行以下命令：

sencha app build --theme=name --destination=build/

其中，--theme 名称为我们新建的主题名称，例如：

sencha app build --theme=custom_theme --destination=build/

4. 应用主题

构建主题成功后，在我们应用程序的 app.json 文件中添加以下代码：

"theme": {
    "extend": "custom_theme"
}

这样我们就成功的应用了我们自定义的主题。

三、主题示例

下面提供两个示例:

示例1：使用自己的图标

在 custom_theme/sass/src目录下，我们可以找到许多 sass 文件, 其中有一个叫做 ext-all.scss。

在这个文件中，我们可以找到下面的代码片段：

$icon-font-url: '/packages/ext-theme-neptune/build/resources/ext-icons.ttf' !default;

这行代码表示 ExtJS 所使用的默认图标存储在 "ext-icons.ttf"这个字体文件中。

我们可以通过下载一个自定义的图标字体并将其存储在我们主题文件夹中来修改应用程序中的图标。

示例2：修改按钮样式

要更改按钮样式，我们可以在 custom_theme/sass/src/button目录下找到以下 sass 文件：

_ext-buttons.scss

在这个文件中，我们可以遵循 Sass 的继承规则轻松修改 ExtJS 默认按钮的样式，例如，更改按钮的背景色和字体：

.x-btn-base-custom {
    @extend .x-btn-base;

    background-color: #8B0000;
    color: #FFFFFF;
    border: 2px solid white;
}

以上就是 ExtJS 自定义主题样式详解的完整攻略。