自定義ExtJS主題

extjs提供的可以使用的主題包對於建立乙個乾淨專業的程式來說已經很有創意了，然而，你可能還是會希望提供自己的一種設計方式或現在存在的企業設計方式。

從歷史上來說，給程式美化就是指的給html標籤提供渲染元件的規則，但是這樣做也會有一些弊端出現。首先，你需要負擔的是各種支援的瀏覽器。其次，隨著框架的成熟，很多不愉快就會產生，比如你的規則風格的變化需要追逐潛在元素的改變。通過extjs提供的api就可以很好的解決這些問題。

通過theming api建立的主題可以在任何extjs程式中共享。這就執行你可以編寫一次規則，重複給你的程式持續改變風格。這個指導就會列出必要的主題工作，不論你是建立乙個工作空間還是應用程式或者單獨就是建立乙個個性化主題。

這個指導將會覆蓋基本的關於使用classic toolkit(extjs)的個性化主題，接下來，我們將會覆蓋不同的現代主題(senchatouch)的方式,最終，將會介紹triton主題和擴充套件性。

構建乙個個性化主題

當你準備好以上步驟的時候，你就可以自定義主題了。首先需要建立乙個工作空間，但這不是必須的，使用如下命令建立工作空間 sencha -sdk generate workspace my-workspace

一、建立乙個測試使用的工作程式

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

瀏覽器檢視效果 http://localhost:1841

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

三、配置全域性變數

建立檔案packages/local/my-classic-theme/sass/var/component.scss增加內容$base-color: #317040;

四、給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

);