本文將根據API文檔中關于主題的介紹做的一次演練，以便熟悉自定義主題的過程。 練習環境： - Sencha Cmd v4.0.1.45 - Ruby 1.9.3-p392 - firefox 26 首先，使用以下Sencha Cmd命令創建一個名為TestMyTheme的應用程序： ~~~ sencha -sdk c:\ext4 generate app TestMyThemec:\TestMyTheme ~~~ 命令中，參數sdk聲明了框架文件所在目錄為C盤的ext4目；generate為命令（commands），表示要創建點什么，而app則表示要創建的是應用程序；MyTheme是要創建的應用程序名稱，這樣，創建的應用程序將會以TestMyTheme作為命名空間；最后的“C:\TestMyTheme”則表示應用程序將創建到C盤的TestMyTheme目錄。 應用程序創建后，使用以下Sencha Cmd命令來將應用程序轉換為Web服務，以便預覽效果： ~~~ sencha fs web -port 8000 start -map c:\TestMyTheme ~~~ 命令中，fs命令表示將要使用功能命令；web則表示創建一個簡單的Web服務器；參數port則用例定義訪問端口，在這里將使用8000端口；start表示啟動服務器；最后的路徑表示Web服務器指向的訪問目錄。 命令執行后，如果顯示以下提示信息，則表示Web服務已經成功啟動： ~~~ Sencha Cmd v4.0.1.45 [INF] Starting shutdown listener socket [INF] Listening for stop requests on: 49331 [INF] Mapping http://localhost:8000/ toc:\TestMyTheme... [INF] Starting http://localhost:8000 [INF] jetty-8.1.7.v20120910 [INF] NO JSP Support for /, did not findorg.apache.jasper.servlet.JspServlet [INF] startedo.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/} [INF] started o.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/} [INF] Started SelectChannelConnector@0.0.0.0:8000 ~~~ 現在，在瀏覽器輸入以下地址，會看到如下圖所示效果：[http://localhost:8000/](http://localhost:8000/)  從圖中可以看到，目前使用的是經典主題。下面來創建自定義主題。切換到C：\TestMyTheme目錄，輸入以下命令來創建自定義主題： ~~~ sencha generate theme MyTheme ~~~ 命令執行完后，切換到C:\TestMyTheme\packages目錄會看到多了一個MyTheme目錄，該目錄就是用來創建自定義主題的目錄。目前的主題是從經典主題擴展出來的，而這里需要從海王星主題擴展，所以，要進入MyTheme目錄，打開package.json文件，將extend屬性的值修改為ext-theme-neptune就行了。 下面先來測試一下自定義主題。在DOS窗口下切換到C:\TestMyTheme\packages\MyTheme目錄，然后輸入以下命令來生成自定義主題： ~~~ sencha package build ~~~ 主題生成以后，打開C:\TestMyTheme\.sencha\app目錄下的sencha.cfg文件。在文件中查找app.theme，會找到以下語句： ~~~ app.theme=ext-theme-classic ~~~ 從語句中可以看到，當前使用的主題是經典主題，現在要使用自定義主題，因而需要將ext-theme-classic修改為MyTheme。修改完成后，在DOS中，切換到C:\TestMyTheme目錄，輸入以下命令生成一次應用程序： ~~~ sencha app build ~~~ 生成過程完成后，刷新瀏覽器應該可以看到下圖所示的效果，主題已經更換為自定義主題（從海王星主題繼承的）。  下面來研究下怎么修改主題。一般情況下，主要的修改方式有兩種，一種是通過修改主題變量來實現，一種是直接定義自己的樣式。要修改變量值，需要在C:\TestMyTheme\packages\MyTheme\sass\var目錄下進行，要直接定義自己的樣式需要在C:\TestMyTheme\packages\MyTheme\sass\src目錄進行。具體修改方式可參考Ext JS包里packages\ext-theme-neptune\sass目錄里的文件。 例如，要修改標簽頁標簽欄的背景顏色，可在C:\TestMyTheme\packages\MyTheme\sass\var目錄下創建一個名為tab的目錄，然后創建一個名為Bar.scss的 文件，在API中，可以查到Ext.tab.Bar的背景顏色的CSS變量代碼是$tabbar-base-color，在Bar.scss文件中添加以下代碼就可以修改標簽欄的背景顏色了： ~~~ $tabbar-base-color: #ff0 !default; ~~~ 修改完成后，在C:\TestMyTheme目錄運行“senccha app build”命令生成一次應用程序，就可看到標簽欄的背景顏色已經修改為黃色了。 如果想直接修改面板主體的背景顏色，但不想修改變量值，可以在C:\TestMyTheme\packages\MyTheme\sass\src目錄下創建一個名為panel的目錄，再在新剪的目錄下創建名為Panel.scss的文件，然后在文件中添加以下代碼： ~~~ .x-panel-body-default { background:none repeat scroll 0 0 #00f; } ~~~ 樣式x-panel-body-default是面板主體所使用的默認樣式，在這里會將背景顏色修改為藍色。重新生成應用程序后，就會看到面板的背景顏色已經修改為藍色了。 執行打包命令后，就可以C:\TestMyTheme\packages\MyTheme\build\resources目錄下找到打包好以后的css文件，將css文件和images目錄復制到項目中就可以在項目中使用自定義的主題了。