自定義ExtJS主題

ExtJS提供的可使用的主題包對於建立一個乾淨專業的程序來講已經頗有創意了，然而，你可能仍是會但願提供本身的一種設計方式或如今存在的企業設計方式。

從歷史上來講，給程序美化就是指的給html標籤提供渲染組件的規則，可是這樣作也會有一些弊端出現。首先，你須要負擔的是各類支持的瀏覽器。其次，隨着框架的成熟，不少不愉快就會產生，好比你的規則風格的變化須要追逐潛在元素的改變。經過ExtJS提供的API就能夠很好的解決這些問題。

經過theming API建立的主題能夠在任何ExtJS程序中共享。這就運行你能夠編寫一次規則，重複給你的程序持續改變風格。這個指導就會列出必要的主題工做，不論你是建立一個工做空間仍是應用程序或者單獨就是建立一個個性化主題。

 

這個指導將會覆蓋基本的關於使用classic toolkit(ExtJS)的個性化主題，接下來，咱們將會覆蓋不一樣的現代主題(SenchaTouch)的方式,最終，將會介紹Triton主題和擴展性。

 

若是你想作以上事情，你就須要安裝sencha cmd 6以上版本。可選的JRE1.7版本，若是你須要使用app watch的話，就必須安裝。若是不安裝JRE7以上，那就須要每次啓動sencha app refresh來刷新改動。

 

構建一個個性化主題

當你準備好以上步驟的時候，你就能夠自定義主題了。首先須要建立一個工做空間，但這不是必須的，使用以下命令建立工做空間 sencha -sdk {path/to/Ext-JS-SDK} generate workspace my-workspace

 

1、建立一個測試使用的工做程序

使用命令sencha -sdk ext generate app -classic ThemeDemoApp theme-demo-app

切換到當前程序 cd theme-demo-app

2、建立自定義主題目錄，使用 命令 sencha generate theme my-classic-theme

啓動程序 sencha app watch

瀏覽器查看效果 http://localhost:1841

修改packages/local/my-classic-theme/package.json下的extend節點，"extend": "theme-neptune"修改成"extend": "theme-crisp"

3、配置全局變量

建立文件packages/local/my-classic-theme/sass/var/Component.scss增長內容$base-color: #317040;

在應用程序中使用自定義的主題。找到theme-demo-app/app.json將"theme": "theme-triton",替換爲"theme": "my-classic-theme",

4、給gridpanel設置紅色邊框，修改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
);