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