Sencha Cmd 3.1 之 主題開發

本篇文章主要介紹sencha cmd3.1的使用以及ExtJS4.2的主題開發。

廢話很少說，咱們來直接看如何使用sencha cmd3.1來生成項目結構，而後再此基礎上製做本身的主題。

要實現如上功能，你須要安裝一些軟件：

1.安裝JDK 或JRE 1.6+；

2. 爲製做主題，須要安裝ruby、compass、sass

3.安裝sencha cmd3.1和下載extjs4.2 sdk

（提示：JDK、extjs4的下載不要說了吧，ruby能夠到http://rubyinstaller.og下載），ruby安裝好後，啓動」start command Prompt with Ruby」，

在ruby命令行窗口中，輸入gem install compass（安裝過程可能會有些慢）

Sencha cmd3.1的下載地址：http://cdn.sencha.com/cmd/3.1.0.256/release-notes.html

Sass的使用就很少說了，網上資料不少。

開始構建項目

打開命令行窗口，輸入以下命令：sencha –sdk d:\ext-4.2.0.663 generate app MyApp d:\extjsApp

說明：（d:\ext-4.2.0.663是extjs sdk的路徑，d:\extjsApp 是項目路徑）若是執行成功，控制檯會有【INF】信息輸出。

 

在D:\extjsApp目錄下生成了如上的目錄結構及文件。可直接訪問index.html。（生成的項目默認使用的主題是ext-theme-classic）   

製做主題

在extjs4.2比較以前的版本又有不少變化，並新增了一些主題，存放是packages目錄下。如今就是要製做本身的主題（繼承或全新的主題）。主題包一樣要使用sencha cmd 命令來生成，（在當前的應用程序（extjsApp）目錄下）輸入命令以下：sencha generate theme mytheme或者在extjsApp/packages目錄下執行sencha generate package -type=theme mytheme也是能夠的。

說明：mytheme爲主題包的名稱。命令若是成功執行，也會在控制檯打印出一些日誌信息，並在packages目錄下生成mytheme文件夾，目錄結構以下： 

生成的mytheme主題包默認配置繼承了ext-theme-classic主題，但在此主題包下並不包含資源文件，你須要buid，纔會生成資源文件已被使用。爲了演示的效果，將mytheme的主題改成繼承ext-theme-neptune，build以後再使用。

方法以下：

首先，打開package.json，編輯"extend": "ext-theme-classic"爲"extend": "ext-theme-neptune"而後，在命令行窗口進入到mytheme目錄下，執行 sencha package build命令。

成功執行後，你會發現mytheme目錄下多了build文件夾，build文件夾內容如圖：

  說明：主題包在build以後，繼承了ext-theme-neptune主題，擁有了和ext-theme-neptune同樣的主題。編輯extjsApp/bootstrap.css文件，將css路徑更改以下：@import 'packages/mytheme/build/resources/mytheme-all.css';  再次訪問index.html如圖 ： 

這樣，mytheme主題就成功繼承了ext-theme-neptune主題了。既然主題能繼承了，咱們也能夠本身編寫本身的樣式來進行覆蓋。

如何修改sass，能夠參考文檔中組件的css vars。

作個小例子，修改sass，製做本身的主題由sencha CMD 生成的extjApp項目，默認繼承的主題是ext-theme-classic，前面介紹了並製做了本身的主題mytheme,如何讓extjsApp默認繼承mytheme呢，須要作以下修改。

編輯extjsApp/.sencha/app/sencha.cfg，找到app.theme=ext-theme-classic，並改成app.theme=mytheme便可。

下面介紹如何修改繼承的主題，

例如：修改panel的文字顏色。在mytheme\sass\var中新建panel文件夾，而後新建Panel.scss，編輯以下所示：$panel-header-color: red !default; （變量名稱請參考API doc）--- 改變panel-header的字體顏色。

編輯完成後，開始編譯，輸入以下命令：sencha app build編譯完成後，extjsApp/build文件夾中會生成已MyApp主題包，關聯mytheme主題。再次訪問如圖：

 

在好比，咱們把主題的基調顏色改成粉色(#FF9999 )

在extjsApp\packages\mytheme\sass\var 文件夾中，新建Component.scss，編輯以下：

$base-color: #FF9999 !default;

修改完成後，回到 extjsApp目錄下，執行命令：

sencha app build

再次訪問index.html  ，以下圖所示：

PS：sass的編輯，能夠仿照官方提供的主題文件及API DOC來進行修改。

（注： sencha CMD 3.1 only for extjs4.2）

（編寫此文件時extjs版本爲4.2.0.663，開發文檔中的Guides的Theming章節並無更新，仍是延用extjs4.1的作法。 Extjs4是個里程碑，以後的版本變化很快，如此文章中有不正確的地方，歡迎網友指正。）

一直想製做ExtJS這個讓人產生審美疲勞的主題（ext-theme-classic），現在能夠實現了，同時感謝黃燈橋老師的指點！