Ext JS Theming System

Theming Ext JS(Classic Tookit)

我们可以直接使用Ext JS中默认的themes，就可以创建非常专业的应用。但你可能希望提供符合自己设计风格或者企业设计的样式。

原来我们装饰一个应用程序，其实就是在渲染组件的过程中，为组件中的HTML单独创建样式规则。这种方法会产生许多的问题。首先，你创建的样式要跨浏览器支持， 其次，随着框架的成熟，底成组样的样式规则需要随着组件元素的结构改变而改变。我们可以使用Ext JS提供的theming API解决这些问题。

在 workspace目录中通过theming API创建的主题(theme) 可以被不同的application使用， 这使得你可以一次次的使用样式，而application的风格都是一样。本指南将罗列模板化所需要的必要条件，以及生成一个workspace， application 样列， 以及自定义主题。

本教程将讲述theming基础，从classic toolkit开始讲如何创建一个自定义主题 。 接下来讲，创建一个modern tookit. 以及如何创建一个通用程序(包含 classic和modern views). 最后，我们将介绍Triton theme， 并且将它添加到Ext JS themes列表中

Requirements

• Sencha cmd 6+
• Java JRE 1.7+( 推荐可选), 在运行sencha app watch时，需要使用到 JRE. sencha app watch在应用程序目录中运行，在你修改theme的源文件时，会自动编译theme. 如果没有安装JRE， 在运行sencha app watch, 在每次修改application 或者theme后, 你将需要运行sencha app refresh.
• Ext JS SDK.

Build a custom Theme

一旦你安装完上面要求的软件，你就可以创建一个完全自定义的主题

Set up the Workspace (optional)

Workspace 的创建是为了在 workspace下不同application 共享资源，比如themes. 但不是为了theming就一定要创建workspace. 如果你在一个单独的应用程序中创建一个theme, 就可以跳过此步聚。

Note: 如果你没有使用workspace, 请确保在我们例子中的文件路径中删除”workspace”.

为了更好的演示，我们创建了一个workspace, 所以在workspace中的所有application都可以访问自定义的主题。运行以下命令

sencha -sdk {path/to/Ext-JS-SDK} generate workspace my-workspace

generate workspace 会在当前的文件夹中，创建一个”my-workspace”的目录。generate workspace命令复制Ext JS SDK中的 workspace. 所以theme和 application可以找到它们的依赖。这个workspace就是主题包所在的地方，我们还将在这里创建需要使用到自定义主题application.

cd my-workspace

包含以下两个子目录

• ext - 包含Ext JS SDK
• packages - 在workspace中application将使用到的package/themes

生成一个应用，用于测试Theme

在自定义组件之前，我们先使用classic toolkit工具，创建一个application用于测试theme. 我们在my-workspace中运行以下命令

sencha -sdk ext generate app -classic ThemeDemoApp theme-demo-app

我们现在生成了一个ThemeDemoApp的application, 它位于 theme-demo-app文件夹中。

cd theme-demo-app

Generating the Custom Theme Package and File Structure

Sencha Cmd 可以生成自定义theme所需要的文件，在”theme-demo-app”文件夹中运行以下命令

sencha generate theme my-classic-theme

Sencha将在package中生成一个名为”my-classic-theme”的theme package. 你可以看到在 packages/local中看到新创建的my-classic-theme目录。让我看一下它的结构

• “package.json” - 这个package的属性文件。它告诉Sencha Cmd关于这个包的信息，比如name, version以及依赖.
• “sass/” - 这个目录所含theme的所有样式文件，源文件主要分为四块
  
  • ”sass/var” - 包含变量
  • “sass/src” - 包含样式规则和 UI 混淆调用，它们可以使用”sass/var”中定义的变量
  • “sass/etc” - 包含额外有用的函数和mixins
  • “sass/example” - 包含的文件用于生成样例组件切割图片(不能因为它的名字为example， 就将它删除，这个目录会被Sencha Cmd使用 )
• “resources/” - theme需要使用到的图片或者其它静态资源
• “overrides/” - 包含Javascript文件，用于重写 Ext JS组件的类

Note: “sass/var/”, “sass/src”, “overrides”中的文件和目录应该跟组件的名字相同，比如用来改变Ext.panel.Panel的变量, 它的路径为 “sass/var/panel/Panel.scss”

接下来，我们需要进一步改变theme和 样开程序。我们需要让Sencha Cmd发现做出的修改，并且将它们输出为CSS。

sencha app watc

“sencha app watch”命令需要安装Java JRE 1.7+. 如果你不能运行sencha app watch, 你需要在每次修改后， 运行 “sencha app refresh”。

接下来，你可以打开你的应用”localhost:1841/theme-demo-app/”， 并且在url末尾添加“?platformTags=fashion:true”

http://localhost:1841/theme-demo-app/?platformTags=fashion:true

添加 “?platformTags=fashion:true” 将告诉浏览器自动刷新应用程序样式

Note: 使用”?platformTags=fashion:true”快速更新仅在现代浏览器支持。 许多在theme中的样式修改可以在浏览器不刷新的情况下，实时显示。但对于theme中修改组件尺寸，则需要手动刷新

Configuring Theme Inheritance

所有的theme package都一个更大主题层次中的一部分。每一个theme都必须继承它的父主题。下一步，我们需要选定自定义主题的父主题。Ext JS附带以下主题:

• theme-base: 这个包是所有其它主题的基础。唯一一个没有parent theme的主题。它包含能让Ext JS组件和布局正常工作的最低限度的CSS规则。theme-base中的样式规则在子主题中不能修改。你应该避免重写这个主题中定义的样式规则。
• theme-neutral: neutral theme 继承自theme-base. 包含了决大多数可配置的样式规则。许多修改Ext JS组件外观的变量都在定义在”theme-neutral”。 这些变量可以在自定义主题中修改
• theme-neptune: Modern borderless theme，继承于 theme-neutral
• theme-neptune-touch - Neptune-Based Touch theme. 继承自theme-neptune. 这包含了用于平板的”touch-sizing”
• theme-triton: Modern theme 使用 font-icons. 继承自theme-neptune
• theme-crisp: 最简单的主题， 继承自theme-neptune
• theme-crisp-touch: Crisp-Based Touch Theme. 继承自theme-crisp. 对于平板电脑，包含了touch-sizing package
• theme-classic: Ext JS 蓝色经典主题， 继承于theme-neutral.
• theme-gray: 灰色主题， 继承于theme-classic
• theme-aria: Accessibility theme。 继承于theme-nepture. 这个主题包含了”aria” package

以下是继承图

所以，我们应该继承哪个主题呢？ 推荐使用theme-neptune, theme-triton, theme-classic或者theme-crisp. 对于平板，可以选择theme-neptune-touch或者theme-crisp-touch. 这么做的原因是，这些主题包含创建一个有吸引力主题所需要的全部代码。Neutral theme应该被认为是最抽像的主题，通常不需要直接继承于它。因为它需要重写上百个变量，这需要几个小时的工作，只适合于高级的theme开发者。如果是继承Triton, Neptune, Crisp, or Classic theme, 只需要通过简单的修改变量，几分钟就可以。

在此教程中，我们将创建一个继承于Crisp的主题。第一步,打开packages/local/my-classic-theme/package.json, 修改以下代码

"extend": "theme-neptune"

为

"extend": "theme-crisp"

Configuring Global Theme Variables

让我们开始修改base color, 许多的Ext JS组件的颜色，都是基于它推导出来。创建一个”packages/local/my-classic-theme/sass/var/Component.scss”文件，添加以下代码

$base-color: #317040;

全局的变量列表，可以查看Global_CSS

Note: 当为一个用户定义的变量分配初始值时，你应该包含dynamic(). 类似于函数调用。这使得Sencha工作可以获得正常的变量值。当你给一个已经存在的变量赋值，则可以不用dynamic().

在Application中使用Theme

打开theme-demo-app/app.json

"theme": "theme-triton",

替换为

"theme": "my-classic-theme",

至此，你可以看到$base-color被应用到屏幕上的组件,

Configuring Component Variables

每一个可被主题化的Ext JS组件，都有一个变量列表用于修改组件的外观。接下来，我们在my-class-theme中修改Panel， 我们创建一个 “my-classic-theme/sass/var/panel/Panel.scss” , 并且添加以下的代码：

$panel-header-font-family: dynamic(Times New Roman);

你现在可以看到panel header使用了”Times New Roman”字体。你可以在查看每个组件API文档的CSS Variables部分了解完整的变量列表。比如，查看Ext.panel.Panel

Creating Custom Component UIs

Ext JS框架中每一个组件都有一个用户接口配置(ui), 默认值为default. 这个属性可以应用在单独的组件实例上，以区别相同组件的不同实例。这个配置可以在Netptune主题上使用，以创建不同类型的Panels和Buttons. 比如， 使用’default’的panel UI，是深蓝色的头部，而’light’的值，则是浅蓝色。

theme-neutral主题包含了创建不同Ext JS Component的mixins. 你可以调用这些混淆创建组件的新UI. 每一个组件的混淆可以 API文档中查看。比如，Ext.panel.Panel, 向下滚动到 “CSS Mixins”部分。让我们使用这些混淆，创建一个自定义的 Panel UI， 我们先创建一个my-class-theme/sass/src/panel/Panel.scss

@include extjs-panel-ui(
    $ui: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px,
    $ui-header-color: white
);

这个mixin的调用将创建一个 名为’highlight’ 的panel ui. 它的header背景为红色，红色的边框，边框大小为5px. 为了使用这个UI, 配置Panel的属性ui: highlight, frame: true打开theme-demo-app/app/view/main/List.js”, 替换为以下的类容

Sample Code

Ext.define('ThemeDemoApp.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',

    ui: 'highlight',
    frame: true,

    requires: [
        'ThemeDemoApp.store.Personnel'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],

    listeners: {
        select: 'onItemSelected'
    }
});

刷新浏览器，你将看到一个红色的”highlight” Grid.

虽然UI mixins要以方便的配置多个组件外观，但也不应该过渡使用。每一次调用都将产生额外的CSS规则。无端的调用UI mixins会生成大量的CSS文件。

Slicing Images for CSS3 effects in IE

Ext JS中大量的组件使用了圆角和线性渐变的背景。在现代化浏览器可以使用css3实现，可是 Ext JS支持IE8和IE9。 它们有的CSS3属性不支持。所以对生成一个跨浏览器的theme是个不小的挑战。

Sencha Cmd为了减少这种差距，会在一个虚拟浏览器(没有界面)中渲染每个组件的这些效果。然后切出圆角和渐变的图片，作为IE8/IE9中组件的背景图片。当你需要为一个自定义的UI添加这些效果时， Sencha Cmd需要使用到切割清单，所以你需要在切割清单中包含这个自定义UI.

为此，我们需告诉Sencha Cmd哪些组件/UI需要被切割。为了上面的”highlight”panel UI创建圆角的切割。我们需要编辑“my-classic-theme/sass/example/custom.js”

Ext.theme.addManifest({
    xtype: 'panel',
    ui: 'highlight'
});

Note:： 可以在相同的addManifest中添加多个实体

Ext.theme.addManifest({
    xtype: 'panel',
    ui: 'highlight'
}, {
    xtype: 'button',
    ui: 'green'
});

如果你对需要对一个原始的组件进行切割，你可以像上面那样做。而如果你是对自定义组件，则把配置添加到custom.js中的”Ext.theme.addShortcuts()”中。

了解更多Ext.theme.addShortcuts和Ext.theme.addManifest, 可以参考“my-classic-theme/sass/example/render.js”中每个方法的描述。也可以参考“ext/classic/theme-base/sass/example/shortcuts.js”中addShortcuts的例子

Theme JS Overrides

有时一个theme需要改变一个组件的某些方面的外观，可在在theme包中，重写Javascript中的组件配置就能做到 。为了演示如何完成，让我们修改Panel的titleAlign. 我们需要创建”my-classic-theme/overrides/panel/Panel.js” 文件

Ext.define('MyCustomTheme.panel.Panel', {
    override: 'Ext.panel.Panel',
    titleAlign: 'center'
});

当你刷新浏览器，你会看到Panel header有一个居中的title. 虽然 可以通过这种方法，重新组件的任何配置。但最佳的做法是，只修改组件的可视化外观，其它配置最好不覆盖。

Modifying Image Assets

所有的图片资源默认从parent theme中继承，但在有的情况下，你可能需要覆盖一个图片。你可以将想要的图片保存到 “my-classic-theme/resources/images/” 文件夹中，取要覆盖图片相同的名字。比如，我们需要改变MessageBox组件的info icon. 可以将新的图片保存为my-classic-theme/resources/images/shared/icon-info.png. 这个图片要比父主题Crisp中的my-workspace/ext/classic/theme-crisp/resources/images/shared/icon-info.png优先级高。

现在修改你的测试应用，让它显示一个使用了定义义icon的MessageBox。在”theme-demo-app/app/view/main/List.js 中添加一个如下的tbar配置

...
tbar: [{
    text: 'Show Message',
    handler: function() {
        Ext.Msg.show({
            title: 'Info',
            msg: 'Message Box with custom icon',
            buttons: Ext.MessageBox.OK,
            icon: Ext.MessageBox.INFO
        });
    }
}]
...

Adding Custom Utility Fashion

如果你的theme需要的函数或者mixins跟组件的样式没有关系( e.g. utilities实用工具), 它们应该保存在theme的 “my-classic-theme/sass/etc” 文件夹中。 你可以按你喜欢的方式组织这个文件夹的文件，但是Sencha Cmd在编译时，只会包含”my-classic-theme/sass/etc/all.scss”文件，所以其它的文件都需要通过在all.scss中, 通过@import指令包含进来。

Styling Your Application

样式也可以只属于单个application, 而不仅仅在theme中定义。Sencha Cmd提供了一个简单的方式来添加应用程序级的样式。它的模式跟theme的styling一样。 application作为theme继承层次中的最终级别。它可以修改theme中的变量，也可以添加它们自已的变量和样式规则。

Changing Theme Variables in Your Application

让我们继续使用之前创建的”theme-demo-app” , 并且在应用中重写主题的$base-color。 打开 “theme-demo-app/sass/var/all.scss”, 添加如下代码

$base-color: #724289;

对于application中的每个类，Sencha Cmd都会检查 sass/var中相应的”.scss”文件的变量和sass/src中的规则。由于application有一个类为ThemeDemoApp.view.main.Main。 则Main视图所对应的变量集合，存放在文件theme-demo-app/sass/var/view/main/Main.scss中。

一个常见的错误是，试图在应用程序的”sass”目录中对Ext JS 的classes 进行样式化。比如， 尝试对Ext.grid.Panel调整样式，添加到theme-demo-app/sass/var/grid/Panel.scss将会失败. Sencha Cmd不会在application的sass文件夹下，对Ext的命名空间进行检查，它只检测ThemeDemoApp的命名空间。

Styling Your Application’s Views

应用程序视图的样式应该保存在”sass/src/”目录下。文件的路径跟视图的名字一样。让我们对ThemeDemoApp 的Users tab进行样式化。由于main view定义为ThemeDemoApp.view.main.Main, 它所对应的文件为theme-demo-app/app/view/main/Main.js, 所以它的css文件为theme-demo-app/sass/src/view/main/Main.scss

.content-panel-body h2 {
    color: orange;
}

然后在Main.js中，为Users panel添加”content-panel-body”的样式类

...
title: 'Users',
iconCls: 'fa-user',
html: '<h2>Content appropriate for the current navigation.</h2>',
bodyCls: 'content-panel-body'
...

如果CSS样式被应用于不同组件的内容，则可以定义在theme-demo-app/sass/var/all.scss文件中。另然为了提供最大的灵活性，可以添加任意多的css样式，但应该尽可能的使用 Ext JS theming API. 使用 themeing API可以保证你的样式不受Ext JS未来版本的影响.

The Namespace

Sencha Cmd为每个框架/应用类的解析，会在 theme/application的 sass/var和sass/src中查找”.scss”文件。 文件路径将对应完整的类名称。对于解析后的类，Sencha Cmd将使用sass.namespace配置，以决定在哪里找到对应的.scss文件

对于theme, sass.namespace为”ext”. 所以任何”Ext.*”的类， Sencha Cmd将会在theme的”sass/var” 和 “sass/src”目录中搜寻。比如 , 当解析 “Ext.button.Button” Sencha Cmd将查找 “my-classic-theme/sass/var/button/Button.scss” and “my-classic-theme/sass/src/button/Button.scss”.

对于application来说，默认为sass.namespace为 application的名字(ThemeDemoApp), 所以任何”ThemeDemoApp.*”的类，会在应用程序的sass/var和sass/src目录中搜索。所以对于ThemeDemoApp.view.main.Main, Sencha Cmd将会看查找demo-app/sass/var/view/main/Main.scss” and “theme-demo-app/sass/src/view/main/Main.scss”.

如果你需要定义的样式，可以用于多个namespace, 你可以设置sass.namespace为空

对于themes , 你可以设置”my-classic-theme/package.json”的sass.namespace为空。这同样适用于 theme-demo-app/app.json

"sass": {
    "namespace":""
}

设置namespace为”“, 允许你在目录结构中，明确的定义namespace. 比如 Ext.button.Button类的变量为sass/var/Ext/button/Button.scss, “ThemeDemoApp.view.main.Main”在sass/src/ThemeDemoApp/view/main/Main.scss.

Organization of Generated Styles

当按上面的方式使用 themes, 样式来自于theme, application， 以及任何需要的包(see the Sencha Cmd Packages guide). 它们会经过Sencha Cmd编译为build\temp\development\ThemeDemoApp\sass\ThemeDemoApp-all.scss. 对于你来说，重要的是理解文件的结构，这样你就能知道什么是来自于theme中的定义，什么是来自需要的包

all.scss的结构如下

+---------------------------------------+
| inclusion flags                       |
+-----------+-----------+---------------+
|           |           | base          |
|           | theme     +---------------+
|           |           | derived       |
|           +-----------+---------------+
|           |                           |
|    etc    | packages (dep order)      |
|           |                           |
|           +---------------------------+
|           |                           |
|           | application               |
|           |                           |
+-----------+---------------------------+
|           |           | base          |
|           | theme     +---------------+
|           |           | derived       |
|           +-----------+---------------+
|           |                           |
|    var    | packages (dep order)      |
|           |                           |
|           +---------------------------+
|           |                           |
|           | application               |
|           |                           |
+-----------+-----------+---------------+
|           |           | base          |
|           | theme     +---------------+
|           |           | derived       |
|           +-----------+---------------+
|           |                           |
|    src    | packages (dep order)      |
|           |                           |
|           +---------------------------+
|           |                           |
|           | application               |
|           |                           |
+-----------+---------------------------+

举例说明，如果”base” theme中的”sass/var”文件夹，有多个应用于”Ext.window.Window”和”Ext.panel.Panel”的”.sass”文件， 则应用于Ext.panel.Panel的文件将比应用于Ext.window.Window的”.sass”文件之前包含进来， 因为Ext.window.Window继承于Ext.panel.Panel。以上结构的原理如下所示:

在”sass/etc”部分，base themes中定义的实用工具，可以在derived themes中使用。

Packages 应该可以使用当前theme提供的功能

Applicatio应该可以使用theme和需要的package中提供的功能

在”sass/var”部分，涉及变量的控制和根据某个变量的推导计算

我们可以看到在ThemeDemoApp-all.scss文件中会按照虚线框中的顺序，依次@import var文件，以我们之前的$base-color为例，它是先加载theme中的sass/var/Component中的$base-color， 最后才导入application中的sass/var/Component. 但sass有一个问题，它不是使用最后加载的var, 而是一行行的解析，所以@base-color的值将是以theme中的值为准，而不是application中设定的值(它应该具有最高优先级)。因为less使用的是懒加载，所以会以application中的$base-color为准。

Sencha Cmd应该会自定义一个scss编译器，先获得application中var的值，然后按照theme相反的方问，由derived theme到base的顺序， 包含到theme中。这样每一级的theme不会包含application中的变量(已经定义在theme中的相同变量除外)或者下一级theme的变量.

Package变量的引入，则按照包的依赖的顺序. 这使得package中的变量可以从当前主题中的值推导出来(比如, 基于base-color的推导计算)

Application一层，必须预料之能够控制所有的变量，所以它们排在最后。

“sass/src” 部分的顺序跟”sass/etc”的一样。子主题的规则可以重写base theme中的规则。

Application的样式在最后，所以它的规则是有最终的决定权

Inclusion Flags

“inclusion flag” 是一组可读的变量集合，用来标识是否包含Javascript组件，它的值为true or false. 如果变量的值为true, 则这个组件在application编译时会被包含进来。这些变量是由Sencha Cmd动态创建的。每个组件以”$include-“开头，之后完整类名(“.”替换为”-“, 并小写). 比如 Ext.grid.Panel, 你可以在一个自定义的mixin中测试这个变量

@if $include-ext-grid-panel {
    // styling contingent upon the presence of Ext.grid.Panel in the app
}

Note: 虽然大多数教程，都推荐使用”sencha app watch”来编译我们的应用程序，这样可以看到application 和自定义的theme的更改。 但是在development环境中(包含”sencha app watch”)， 所有的”$include-"变量都会设置为true. 为了测试你的theme中"$include-“变量的使用，你需要将application编译为testing or production

sencha app build testing
sencha app build

Sharing a Theme Between Applications

为了能够与其它程序共享刚刚创建的theme, 我们只需在”my-workspace”目录中运行以下命令

sencha -sdk ext generate app -classic AnotherApp another-app

然后修改新创建application的app.json的theme部分

"theme": "my-classic-theme",

Building the Theme

编译theme时，会在你的theme文件夹下创建一个”build”目录， 在这里为”my-classic-theme/build/resources”, 这将看到一个文件名为”my-classic-theme-all.css”. 这个文件包含你theme中组件的样式规则。你可以直接在app中链接这个文件, 但不推荐这么使用。当Sencha Cmd编译一个应用为production时， 它只会组合应用程序所需要的js和style. 所以编译好的theme的”all”版本，只适用于不是使用 Sencha Cmd生成的 app.

Triton Theme Icons

‘default’ Component Images

各种组件(Buttons, Menus)的 “default” ui会包含图片。当你为这些组件创建一个自定义ui，当theme编译时，你会看到如下警告

WARNING: @theme-background-image: Theme image not found:

虽然刷新theme/app, Sencha Cmd将使用ui anem在 “default”中找到图片。 比如， 你创建为small Buttons创建一个ui, 它的名字为”admin”.Sencha Cmd将警告没有找到”admin-small-arrow.png”.

解决方法是将你要继承的theme包中，复制”default”的图片资源, 到自定义theme中的”resource/images”目录中。然后可以替换文件的中的default为自定义的ui名字。在这里，我们扩展了Neptune, 你可以从ext/classic/theme-neptune/resources/images/button文件夹中，复制”default”图片到packages/my-classic-theme/resources/images/button/. 然后将”default”替换为”admin”.

default-small-arrow.png

将变为

admin-small-arrow.png

Ext.button.Button

Button 通过small, medium, large缩放， 默认为small. 当你创建一个自定义ui时，你需要为每个尺寸提供一个 mixin.

@include extjs-button-small-ui(
    $ui: 'green',
    $background-color: green
);

@include extjs-button-medium-ui(
    $ui: 'green',
    $background-color: green
);

@include extjs-button-large-ui(
    $ui: 'green',
    $background-color: green
);

这同样适用于”-toolbar” button mixins。

@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: green
);

然后可以在toolbar中，使用如下的代码装饰一个button

xtype: 'toolbar',
items: [{
    text: 'Toolbar Button',
    ui: 'green-toolbar'
}]

Ext.panel.Panel

Panel可以配置 frame:true 默认为frame:false. 所以在默认情况下，如果ui:'highlight' ， 则ui在Panel.scss中的定义如下

@include extjs-panel-ui(
    $ui: 'highlight',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

可是，这只能用于non-frames的panel. 为了能应用到panel的配置为frame: true和 ui:'highlight'， 我们需要在Panel.scss文件中为$ui名字加上”-framed”. 这样Panel.scss中framed和unframed两个ui版本。

@include extjs-panel-ui( $ui: 'highlight', $ui-header-background-color: red, $ui-border-color: red, $ui-header-border-color: red, $ui-body-border-color: red, $ui-border-width: 5px, $ui-border-radius: 5px );

@include extjs-panel-ui( $ui: 'highlight-framed', $ui-header-background-color: red, $ui-border-color: red, $ui-header-border-color: red, $ui-body-border-color: red, $ui-border-width: 5px, $ui-border-radius: 5px );

Ext.menu.Menu

Menu ui图片需要从parent theme中复制到自定义theme中。

Ext.toolbar.Breadcrumb

Breadcrumb ui图片需要从parent theme中复制到自定义theme中。

Ext.tab.Tab

Tab ui图片需要从parent theme中复制到自定义theme中。
并且确保包含了ui-color-active, $ui-background-color-active

Ext.tab.Bar

TabBar ui 图片需要从parent theme中复制到自定义theme中。

Note：当使用 extjs-tab-bar-ui mixin创建tab bar UI时，你需要创建一个相同名字的tab-ui.

Ext.toolbar.Toolbar

Toolbar ui图片需要从parent theme中复制到自定义theme中。

Upgrade from Ext 5 to Ext 6 Classic

所有定义在{appRoot}/sass/etc/all.scss的变量应该移到 {appRoot}/sass/var/all.scss

推荐- 删除用户自定义变量在初始化时的!default, 而使用dynamic()。 这样可以确保1) 可以在之后的的代码中重新复制 2) 可以被Sencha工具程序获得

推荐-将theme目录从根目录”packages/”目录中复制到application/workspace的”packages/local/”.