演練Ext JS 4.2自訂佈景主題

演練Ext JS 4.2自訂佈景主題

本文是根據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:8000Sencha 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:8000Sencha 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/

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/140107/0Q502K94-0.png" style="float:none;" title="1.PNG" alt="wKioL1LH6kXClA0QAAAfgKOl_mo335.png" />

可以看到，目前使用的是經典主題。下面來建立自訂佈景主題。切換到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

產生過程完成後，重新整理瀏覽器應該可以看到所示的效果，主題已經更換為自訂佈景主題從海王星主題繼承的）。

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/140107/0Q502F29-1.png" title="2.PNG" alt="wKioL1LH6qqz0VOxAAAXB8cEscY308.png" />

下面來研究下怎麼修改主題。一般情況下，主要的修改方式有兩種，一種是通過修改主題變數來實現，一種是直接定義自己的樣式。要修改變數值，需要在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目錄複寫到項目中就可以在項目中使用自訂的主題了。