Extjs学习（5）：Extjs主题

1. 需求准备

    SenchaCmd 6+ ；

    Java JRE 1.7+；（可选，可是建议）

    Extjs

2. 建立工做空间：workspace（可选）

$ sencha -sdk /home/jalen_chu/Jalen_chu/Tools/extjs/EXTJS/ext-6.0.0 generate workspace /home/jalen_chu/bin/Sencha/my-workspace

$ cd /home/jalen_chu/bin/Sencha/my-workspace

    工做空间包含：

    文件夹 ext：Extjs SDK

    文件夹 packages：将要打包主题

    文件 workspace.json

3. 生成一个应用去测试主题

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

$ cd theme-demo-app

4. 生成自定义主题包和文件结构

    生成主题包

$ sencha generate theme my-classic-theme
能够看到生成包：/my-workspace/packages/local/my-classic-theme    //下面图片路径是错的

    文件目录：

$ sencha app watch
//sencha app watch须要JRE1.7+，没有的话每次改变主题用sencha app refresh

    访问浏览器：http://localhost:1841 显示

    访问浏览器本应用：http://localhost:1841/theme-demo-app/?platformTags=fashion:true  显示

 

 
//“?platformTags=fashion:true”当应用主题变动时，指示浏览器刷新应用程序内的样式，且只支持modern browsers

5. 配置主题的继承关系

    继承关系树图：

    推荐使用：theme-neptune，theme-triton，theme-classic，或theme-crisp

    平板推荐使用：theme-neptune-touch，theme-crisp-touch

    在这里咱们继承自：Crisp theme，因此须要

    配置继承文件：packages/local/my-classic-theme/package.json 的属性

//将
"extend": "theme-neptune"
//改为
"extend": "theme-crisp"

6. 配置主题的全局变量

    建立一个新的文件：packages/local/my-classic-theme/sass/var/Component.scss   内容是：

$base-color: #317040;

    参考：HTML Color Codes和Global_CSS

7. 在应用里面使用主题

    配置应用主题的文件：theme-demo-app/app.json

//将
"theme": "theme-triton",
//改为
"theme": "my-classic-theme",

    而后看下效果：颜色变化

$ sencha app watch

8. 配置组件的变量

    以配置Panel Headers的字体类型为例；

    建立配置文件：my-classic-theme/sass/var/panel/Panel.scss    添加代码为：

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

9. 建立自定义组件的UI：配置组件的外观

    涉及：Neptune theme里面的Panels和Buttons，

    theme-neutral主题里面的CSS Mixins（在Ext.panel.Panel）

    下面使用mixin建立Panel UI，

    建立新的文件：my-classic-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
);

    想要使用这个UI，还要配置一个Panel的“highlight”做为他的属性，修改：theme-demo-app/app/view/main/List.js

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'
    }
});

    而后就能够sencha app watch下了（官网说尽可能不要使用，会产生大量的CSS文件），效果：

10. 经过CSS3来分割（层）图片，在IE里

    建立文件：my-classic-theme/sass/example/custom.js    添加：

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

    若是有多个条目的话，能够这样添加：

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

    参考：/my-workspace/ext/classic/theme-base/sass/example/shortcuts.js

11. 仅仅经过JS来配置主题

    如：改变Panel里面的titleAlign配置

    建立文件：my-classic-theme/overrides/panel/Panel.js  添加：

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

    效果：

12. 修改图像资源：

    图片资源位置：my-classic-theme/resources/images/

    找一个图片：my-classic-theme/resources/images/shared/icon-info.png

    能够去这里面找：my-workspace/ext/classic/theme-crisp/resources/images/shared/icon-info.png

    修改：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
        });
    }
}]
...

    效果：

13. 添加自定义实用的方法

    文件目录：my-classic-theme/sass/etc

    应用样式：添加应用程序级别的样式，容许两个应用遵循相同的模式为主题

    更改主题变量：重写主题的 $base-color，打开：theme-demo-app/sass/var/all.scss 添加

$base-color: #724289;

    效果：变紫色了

    （区别：sass/var/对应变量，sass/src/对应规则）

    （“ThemeDemoApp.view.main.Main”对应的样式放在：“theme-demo-app/sass/var/view/main/Main.scss”）

    （注意：“Ext.grid.Panel”-->“theme-demo-app/sass/var/grid/Panel.scss”是错误的，不是别“Ext”）

14. 布置应用的视图（Views）的样式

    应用视图在：sass/src/ 下面

    咱们来在应用里设置一个Users tab

    修改：theme-demo-app/sass/src/view/main/Main.scss  添加：

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

    去User panel里面添加“content-panel-body” CSS，修改：theme-demo-app/app/view/main/Main.js

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

    效果：

15. 命名空间

    例如：

    “Ext.button.Button”-->“my-classic-theme/sass/var/button/Button.scss”

    “Ext.button.Button”-->“my-classic-theme/sass/src/button/Button.scss”

    “ThemeDemoApp.view.main.Main”-->“theme-demo-app/sass/var/view/main/Main.scss”

    “ThemeDemoApp.view.main.Main”-->“theme-demo-app/sass/src/view/main/Main.scss”

    对于主题来讲，能够设置sass.namespace在：“my-classic-theme/local/package.json”.

"namespace": "Ext",

    若是“them-demo-app/app.json”里面这样设置：

“sass”: {
    “namespace”: “”
}

    那么：

    “Ext.button.Button”-->“sass/var/Ext/button/Button.scss”

    “ThemeDemoApp.view.main.Main”-->“sass/src/ThemeDemoApp/view/main/Main.scss”

16. 给生成的样式进行编组（group）

    再上面的例子中，全部样式组织在：“app-all.scss”文件里

    “all.scss”的生成结构；

    （以上是级联列表，详细参考官网API）

17. 包含标志：inclusion flags

    JavaScript类里面的只读变量，true或false，如：使用Ext.grid.Panel,

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

sencha app build testing
sencha app build

18. 应用之间共享主题

    接上面例子：Ctrl+c，结束终端运行，

$ cd /home/jalen_chu/bin/Sencha/my-workspace
$ sencha -sdk ext generate app -classic AnotherApp another-app

$ cd another-app
$ sencha app watch

    下面告诉app使用自定义的主题，编辑：“another-app/app.json”

//将这个
/**
 * The name of the theme for this application.
 */
"theme": "theme-triton",
//改为下面的
/**
 * The name of the theme for this application.
 */
"theme": "my-classic-theme",

    这样就能够了。使用浏览器打开：“another-app/index.html”

    效果；

19. 构建主题：不推荐

    文件路径：my-classic-theme/build/resources/my-classic-theme-all.css

    其中包含这个主题全部组件的式样规则，这个应用在外部生成的app里面，而不是利用Sencha Cmd生成的app

20. 附加说明

    1）默认组件的图片（images）

//当你建立一个自定义UI遇到这种状况时
WARNING: @theme-background-image: Theme image not found:

    解决方法，去这里替换或重命名：“resources/images”

    若是你建立一个mixin ui命名为“admin” 的小按钮，为了添加“admin” button ui在你的自定义主题中，你能够从

    “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

    2）Ext.button.Button

    建立自定义主题时须要从父类主题里面copy须要的button ui，比例有小，中和大（默认为小），当为buttons建立自定义

    的UI时须要提供一个button mixin

//这个是“extjs-button-ui”
@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
);

//这个是使用“-toollbar” button mixins.
@include extjs-button-toolbar-small-ui(
    $ui: 'green',
    $background-color: green
);

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

    3）Ext.panel.Panel

    配置：frame: true 和  frame: false，默认：ui: ‘highlight’

@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-framed panels

// 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 );
@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 );

    4）Ext.menu.Menu

    5）Ext.toolbar.BreadCrumb

    6）Ext.tab.Bar

    7）Ext.tab.Tab

    8）Ext.toolbar.Toolbar