ExtJS4.2.1自定義主題（theme）樣式詳解

時間  2019-11-29
標籤 extjs4.2.1 extjs 自定義 主題 theme 樣式 詳解 简体版
原文   原文鏈接

(基於Ext JS 4.2.1版本)javascript

UI組件css

學習ExtJS就是學習組件的使用。ExtJS4對框架進行了重構，其中最重要的就是造成了一個結構及井井有條的組件體系，由這些組件造成了Ext的控件。html

ExtJs4的組件體系中有將近100種組件，而這些組件又能夠大體分爲四大類，即容器類組件、工具欄及菜單欄組件、表單及元素組件、其餘組件。java

theme主題git

ExtJs4引入了全新的主題系統，採用Sass和Compass技術，提供了標準的主題模板，經過對主題模板的簡單定製就能夠創造出豐富多彩的各類主題。github

Sass和Compass概述編程

Sassjson

Sass樣式表語言是CSS的一個擴展，爲CSS提供了變量、內嵌規則、混入（mixins）、選擇器繼承等特性，在最新的Sass3中100%兼容CSS3，語法文件也升級爲SCSS（Sassy CSS），每個有效的CSS3文件也是有效的SCSS文件，這種兼容性下降了學習成本，開發人員能夠平穩的由CSS過渡到Sass的開發。bootstrap

Sass樣式表語言爲CSS級聯樣式表提供了編程的能力，如今咱們能夠在Sass中定義變量在不一樣的樣式中引用甚至進行計算，定義混入（mixins）在不一樣的地方進行復用，這些能力都是CSS所不具備的，通過編譯以後Sass會輸出標準的CSS文件在不一樣的瀏覽器中使用。api

Sass特性：

  • 混入(Mixins)——class中的class；
  • 參數混入——能夠傳遞參數的class，就像函數同樣；
  • 嵌套規則——Class中嵌套class，從而減小重複的代碼；
  • 運算——CSS中用上數學；
  • 顏色功能——能夠編輯顏色；
  • 名字空間(namespace)——分組樣式，從而能夠被調用；
  • 做用域——局部修改樣式；
  • JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

Sass的詳細介紹和說明可見：http://sass-lang.com/ 

Compass

Compass是一個基於Ruby的、開源的、用於CSS創做的框架。它使用Sass樣式表語言，能夠很是容易和高效地構造樣式表，同時，Compass內置了大量Web開發中可重用的優秀模式，以便開發者使用。下面用一個簡單的等式來展現Compass所發揮的做用：

Compass = Sass樣式表語言 + 大量可重用的優秀CSS模式

Compass的詳細介紹和說明可見：http://compass-style.org/

準備工做(安裝運行環境)

安裝Ruby

使用SASS和Compass須要用到Ruby，能夠到http://rubyinstaller.org/下載Ruby的安裝包，下載後的文件是「rubyinstaller-1.9.3-p429.exe」。

（注意，不要下載最新版Ruby2.0.0-p195，否則後面開發中會因爲版本問題出錯。Ruby 1.9.3-p429就能夠。）

注意將安裝目錄上的3個選項都選上。

在開始菜單Ruby程序組下，單擊「Start Command Prompt with Ruby」。

進入Ruby的命令行界面。輸入 ruby –v 出現版本信息，說明Ruby運行環境安裝成功。

安裝Compass和Sass

要使用Compass，首先要在Ruby中安裝框架。

在開始菜單Ruby程序組下，單擊「Start Command Prompt with Ruby」，顯示命令提示窗口。在命令行輸入如下命令開始安裝Compass：

gem install compass

（該命令能夠自動遠程安裝Compass相關文檔到本地文件夾中，因爲採用遠程安裝的方式，所以安裝時間較長，請耐心等待。）

在命令行中執行：compass –v 和 sass –v能夠分別查看當前系統中已安裝的版本信息。

到這裏，已經完成了Sass和Compass的安裝。

Compass項目（Sass編譯成Css）

1.項目初始化

接下來，要建立一個你的Compass項目，假定它的名字叫作myproject，那麼在命令行鍵入：　　

compass create myproject

當前目錄中就會生成一個myproject子目錄。

進入該目錄：

cd myproject

你會看到，裏面有一個config.rb文件，這是你的項目的配置文件。還有兩個子目錄sass和stylesheets，前者存放Sass源文件，後者存放編譯後的css文件。

接下來，就能夠動手寫代碼了。

2.編譯

在寫代碼以前，咱們還要知道如何編譯。由於咱們寫出來的是後綴名爲scss的文件，只有編譯成css文件，才能用在項目上。

Compass的編譯命令是

compass compile

該命令在項目根目錄下運行，會將sass子目錄中的scss文件，編譯成css文件，保存在stylesheets子目錄中。

默認狀態下，編譯出來的css文件帶有大量的註釋。可是，生產環境須要壓縮後的css文件，這時要使用--output-style參數。

compass compile --output-style compressed

Compass只編譯發生變更的文件，若是你要從新編譯未變更的文件，須要使用--force參數。

compass compile --force

除了使用命令行參數，還能夠在配置文件config.rb中指定編譯模式。

output_style = :expanded

:expanded模式表示編譯後保留原格式，其餘值還包括:nested、:compact和:compressed。

說明：

* nested：嵌套縮進的css代碼，它是默認值。

* expanded：沒有縮進的、擴展的css代碼。

* compact：簡潔格式的css代碼。

* compressed：壓縮後的css代碼。

進入生產階段後，就要改成:compressed模式。

output_style = :compressed

也能夠經過指定environment的值（:production或者:development），智能判斷編譯模式。

environment = :development

output_style = (environment == :production) ? :compressed : :expanded

在命令行模式下，除了一次性編譯命令，compass還有自動編譯命令

compass watch

運行該命令後，只要scss文件發生變化，就會被自動編譯成css文件。

更多的compass命令行用法，請參考官方文檔。

Compass、Sass與eclipse集成

經過上面的配置，咱們能夠經過文本編譯器等編輯好Sass文件後，再經過相應的目錄結構經過Ruby將Sass編譯成css，再複製粘貼到eclipse中咱們的工程內，進行開發。能夠看出這個過程比較繁瑣。那麼，如何在eclipse中能夠直接編輯Sass文件，並能自動編譯成css被工程應用?下面就是對Compass、Sass與eclipse的集成研究。

1 確認ant已經安裝

2 打開工程的「properties」，選擇「Builders」，而後點擊 「New…」 按鈕

3 選擇「Ant Builder」，點擊「OK」

4 輸入名稱「compass.compile」，在「Main」Tab頁中，點擊「Browse Workspace」來選擇已放入工程中的build.xml文件。

5 選擇「Targets」Tab頁，在Auto-Build中點擊「Set Targets」按鈕，選擇「compass.compile」來使用Compass（ 「sass.compile」只是用Sass），點擊「OK」

6 選擇「Build Options」Tab頁，點擊「Select Resources」按鈕，選擇Sass文件目錄，點擊「Finish」，再點擊「OK」。

如今當編輯Sass文件後， css文件將會自動的被建立或更新。

Sencha CMD安裝

Sencha CMD是打包和部署ExtJs和Sencha Touch應用的命令行工具。爲了開發ExtJs4.2的主題，你必須安裝Sencha CMD3.1或更高的版本。

安裝Java Run-time Environment or JRE，要求版本>=6.0。

爲了編輯樣式，須要Compass、Sass，因此須要安裝Ruby。注意，不要下載最新版Ruby2.0.0-p195，否則後面開發中會因爲版本問題出錯。Ruby 1.9.3-p429就能夠。

下載Sencha Cmd安裝包進行安裝。

下載並解壓Ext JS SDK。

ExtJS自定義主題樣式開發

建立工做空間

（注意，目錄名稱等不要用中文，特殊符號最好也不要用，不然會出錯）

打開系統cmd命令行窗口，定位到SDK解壓的目錄。輸入

sencha -sdk d:/ExtJs4-App/ext-4.2.1.883 generate workspace my-workspace

建立了一個包含自定義主題包package名爲my-workspace的工做空間。這個命令將Ext JS SDK和package關聯到您的工做區中,這樣，主題和應用程序能夠找到他們所需的依賴項。這個命令生成的主題和應用程序必須執行在工做區目錄中，所以改變你的工做目錄到新的「my-workspace」目錄：

cd my-workspace

你應該在「my-workspace」文件夾下看到兩個文件夾：

l  「ext」：包含Ext JS SDK

l  「package」包含Ext JS語言環境和主題包

生成一個應用程序進行測試的主題

建立一個自定義主題以前，咱們須要設置一個方法來測試主題。最好的測試方法是在一個應用程序中使用它。在「my-workspace」目錄下運行如下命令：

sencha -sdk ext generate app ThemeDemoApp theme-demo-app

這告訴Sencha Cmd在一個新的子目錄「theme-demo-app」中生成一個名爲ThemeDemoApp的應用程序，並同時關聯" Ext "目錄下的Ext JS SDK。如今讓咱們構建應用程序：

cd theme-demo-app

sencha app build

有兩種方法能夠運行您的應用程序: 　

7 開發模式：經過瀏覽器打開「theme-demo-app/index.html」。

這個是沒有進行資源（源文件）壓縮的，易於調試。

8 產品模式：經過瀏覽器打開「build/ThemeDemoApp/production/index.html」。

這個是爲了給應用提供更小的內存佔用和更好的性能，進行了資源（源文件）壓縮。

生成主題包和文件結構

Sencha Cmd容許自動的生成主題包和文件結構。在「theme-demo-app」下運行如下命令：

sencha generate theme my-custom-theme

這是告訴Sencha Cmd在當前工做空間下建立一個名爲「my-custom-theme」的主題包。

讓咱們看一看它的內容：

l  」package.json」——這是包屬性文件。它告訴Sencha Cmd一些包的信息，如 name, version, and dependencies  (其餘包所須要的配置)。　

l  「sass/」——這個目錄包含全部關於主題的sass文件。sass文件分爲三個主要部分:

1)     「sass/var/」——包含sass變量；　

2)     「sass/src/」——包含sass規則和UI混合調用，它們可使用「sass/var/」下的變量； 　　

3)     「sass/etc/」——包含額外的公用功能或混入在「sass/var/」和「sass/src/」中的文件，這些文件應該是結構化匹配的組件類路徑。例如， Ext.panel.Panel的樣式變量應放置在一個命名爲「sass/var/panel/Panel.scss」的文件內。　　

l  「resources/」——包含主題須要的圖像和其餘靜態資源。　　

l  「overrides/」——包含一些替換Ext JS組件類（對組件進行主題化的類）的JavaScript。

配置主題繼承

主題包一般是這樣具備一個很是重要的、附加功能的特殊的包，它們能夠繼承自其餘的主題包。新版本Ext Js 4.2中利用主題包的這一特性來建立它的主題層次結構：

 

每一個主題包必須從Base主題擴展。建立自定義主題的下一步是找出從哪一個主題進行擴展。在工做空間中能夠看到如下主題包：

l  "ext-theme-base"--這個包是其餘主題的基本主題，它是惟一一個沒有父主題的主題包。它包含了設置CSS規則的最少值，這些值是讓Ext JS組件和佈局正確工做所必需的的內容。"ext-theme-base"的樣式規則在派生的主題中是不可配置的，應該避免覆蓋由這個主題建立的任何樣式規則。

l  "ext-theme-neutral"--從"ext-theme-base"擴展而來，包含了絕大多數的可配置的樣式規則。大多數的變量是用於配置在"ext-theme-neutral"中定義的Ext JS組件樣式。這些變量能夠被自定義主題替換。

l  "ext-theme-classic"--默認主題。從"ext-theme-neutral"擴展而來。

l  "ext-theme-gray"--從"ext-theme-classic"擴展而來

l  "ext-theme-access"--從"ext-theme-classic"擴展而來。

l  "ext-theme-neptune"--從"ext-theme-neutral"擴展而來。

建議使用"ext-theme-neptune"或"ext-theme-classic"做爲自定義主題擴展的開始節點。這是由於，這些主題包含建立一個具備吸引力並當即可用的主題的全部必要的代碼。"ext-theme-neutral"是一個很是抽象的主題，不該該直接用於擴展。基於"ext-theme-neutral"進行自定義主題的擴展，須要數以百計的變量覆蓋和過多的工做量，並且可能只有很是高級的主題開發者才能進行這項工做，反之，使用"ext-theme-neptune"或"ext-theme-classic"能夠經過簡單地改變幾個變量在幾分鐘內啓動並運行。另外你能夠覆蓋"ext-theme-gray"或"ext-theme-access"，若是它們能夠爲自定義主題提供一個更理想的起點。

例如，咱們建立一個由"ext-theme-neptune"擴展的自定義主題。首先須要替換目錄"packages/my-custom-theme/package.json"：

"extend": "ext-theme-classic"

 爲

"extend": "ext-theme-neptune"

你如今須要更新您的應用程序。確保正確的主題JavaScript文件都包含在應用程序「bootstrap.js」中，這樣應用程序就能夠在開發模式下運行。在"theme-demo-app"目錄下運行如下命令。

sencha app refresh

配置全局主題變量

如今已經創建了本身的主題包，能夠開始修改主題外觀。首先修改可以派生出ExtJs組件公有顏色的基礎顏色。在"my-custom-theme/sass/var/"下，建立一個名爲Component.scss的文件，在文件中輸入：

$base-color: #317040 !default;

若是你想讓你的自定義主題是可擴展的，必定要在全部變量末尾配置!default。沒有!default你將不能覆蓋一個派生主題的變量，由於Sencha Cmd變量遵循「反向」規則——大多數派生樣式第一，基本樣式最後。更多的!default信息可參考：Variable Defaults。

完整的Ext JS全局SASS變量列表請參考：Global_CSS。

構建包

爲了使全部自定義的樣式規則生成css文件，須要在"packages/my-custom-theme/"目錄下運行命令：

sencha package build

這將在package下構建一個目錄。在 "my-custom-theme/build/resources"下你會發現一個文件命名爲 my-custom-theme-all.css。這個文件包含全部Ext JS組件的樣式規則。你能夠直接在應用程序中運用這個文件，但這並不可取，由於「all」文件包含全部的樣式，可是Ext JS組件和大多數應用程序只使用Ext JS組件的一個子集。當你構建一個應用程序時，Sencha Cmd可以過濾掉未使用的CSS樣式規則，可是首先咱們須要配置測試程序使用自定義主題。

在一個應用程序使用一個主題

爲剛剛建立的自定義主題配置測試應用程序。找到theme-demo-app/.sencha/app/sencha.cfg

app.theme=ext-theme-classic

修改成

app.theme=my-custom-theme

若是你已經運行了一個構建使用經典主題的應用程序，你應該清理構建目錄。從theme-demo-app運行:

sencha ant clean

接着構建應用：

sencha app build

在瀏覽器中打開"theme-demo-app/index.html"查看效果

配置組件的變量

每個Ext JS組件都有一個全局變量的列表,能夠用來配置其外觀。下面，咱們來改變面板標題的字體類型。建立文件"packages/my-custom-theme/sass/var/panel/Panel.scss"，代碼以下：

$panel-header-font-family: Times New Roman !default;

在「theme-demo-app」下運行：

sencha app build

在瀏覽器中打開"theme-demo-app/index.html"查看效果

在API文檔的每一節 "CSS Variables"中，有組件SASS變量的詳細列表。

建立自定義組件UI

在ExtJs框架中，每個組件都有一個配置界面（默認爲「default」）。這個屬性能夠被配置在單個組件實例中，區別於其餘組件的相同類型，給他們提供一個不一樣的外觀。

 建立文件"packages/my-custom-theme/sass/src/panel/Panel.scss"，代碼以下：

 

@include extjs-panel-ui(
    $ui-label: '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
);
打開"theme-demo-app/app/view/Viewport.js"，修改代碼以下：
Ext.define('ThemeDemoApp.view.Viewport', {
			extend : 'Ext.container.Viewport',
requires:['Ext.layout.container.Border','ThemeDemoApp.view.Main'],
			layout : {
				type : 'border'
			},
			items : [{
						// default UI
						region : 'west',
						xtype : 'panel',
						title : 'West',
						split : true,
						width : 150
					}, {
						// custom "highlight" UI
						region : 'center',
						xtype : 'panel',
						layout : 'fit',
						bodyPadding : 20,
						items : [{
									xtype : 'panel',
									ui : 'highlight',
									frame : true,
									bodyPadding : 10,
									title : 'Highlight Panel'
								}]
					}, {
						// neptune "light" UI
						region : 'east',
						xtype : 'panel',
						ui : 'light',
						title : 'East',
						split : true,
						width : 150
					}]
		});

 

 在 "theme-demo-app" 下運行程序：

sencha app build

在瀏覽器中打開"theme-demo-app/index.html"查看效果

雖然UI是一個方便的方法,能夠混合多種外觀配置爲一個組件,他們不該該被過分使用。由於每次調用UI mixin會生成額外的CSS規則,無償調用UI mixin會產生過大的CSS文件。

另外重要一點是要記住當調用UI mixin時，是經過其命名參數調用mixin，不是沒有參數值的有序列表。儘管SASS都支持這兩種形式，最好使用這種形式:

@include extjs-component-ui(

    $ui-foo: foo,

    $ui-bar: bar

);

 避免下面的形式：

@include extjs-component-ui(foo, bar);

由於mixin參數的複雜性和數量有可能變更，如新增或刪除一個參數，那麼後一種調用方式就會失效。

修改圖像資源

全部必需的圖像資源默認是繼承父主題的,但在某些狀況下,您可能須要覆蓋一個圖像。這能夠經過把所需的圖像在"my-custom-theme/resources/images/"下覆蓋相同名稱的圖像。例如,讓咱們修改彈出窗口組件的信息圖標。保存"packages/my-custom-theme/resources/images/shared/icon-info.png"

如今使用自定義圖標，修改測試應用程序顯示一個消息框。在應用程序窗口的highlight panel 添加items("theme-demo-app/app/view/Viewport.js"):

requires: [

    ...

    'Ext.window.MessageBox',

    ...

],

...

title: 'Highlight Panel',

items: [{

    xtype: 'button',

    text: 'Show Message',

    handler: function() {

        Ext.Msg.show({

            title: 'Info',

            msg: 'Message Box with custom icon',

            buttons: Ext.MessageBox.OK,

            icon: Ext.MessageBox.INFO

        });

    }

}]

...

 構建應用程序，在瀏覽器中查看效果

爲IE中的CSS3效果切割圖像

在許多狀況下,當建立新的用戶界面時，可能包括背景漸變或圓角。不幸的是,不是全部瀏覽器都支持CSS3屬性,因此咱們必須使用圖像來彌補。Sencha Cmd可以自動切割這些圖片給你。要作到這一點,咱們須要告訴Sencha Cmd哪些組件須要切片。這些切片配置文件都包含在每一個主題的 "sass/example/"目錄下。參考"packages/ext-theme-base/sass/example/"：

"shortcuts.js"--這個文件包含了組件類型的基本配置,能夠切割。大多數自定義主題不須要包含"shortcuts.js"文件;除非你的主題包括自定義組件樣式。你的樣式繼承全部的基本樣式的快捷鍵定義,也能夠添加額外的快捷定義，須要在 "shortcuts.js"文件中調用Ext.theme.addShortcuts()函數。　　

"manifest.js"--這個文件包含可以生成切片圖像的組件UI列表。能夠從父主題繼承全部的清單條目,也能夠在"manifest.js"中經過調用Ext.theme.addManifest()函數添加本身的清單條目。　　

"theme.html"--這個文件是用來渲染在"manifest.js"中定義的文件。

 爲"highlight" panel建立圓角切片， 建立"packages/my-custom-theme/sass/example/manifest.js" ，代碼以下：

Ext.theme.addManifest(

    {

        xtype: 'panel',

        ui: 'highlight'

    }

);

 編輯"packages/my-custom-theme/sass/example/theme.html"添加如下腳本標籤：

<!-- Required because Sencha Cmd doesn't currently add manifest.js from parent themes -->

<script src="../../../ext-theme-neptune/sass/example/manifest.js"></script>

<!-- Your theme's manifest.js file -->

<script src="manifest.js"></script>

爲了可以在構建應用程序時將UI切片，必須在"theme-demo-app/sass/example/theme.html"中添加兩個腳本標記：

<script type="text/javascript" src="../../../packages/ext-theme-neptune/sass/example/manifest.js"></script>

<script type="text/javascript" src="../../../packages/my-custom-theme/sass/example/manifest.js"></script>

構建應用程序，在IE8及如下版本瀏覽，能夠看到 "highlight" panel 展現的是圓角，和在IE9及其餘瀏覽器的CSS3效果呈現一致。

覆蓋主題JS

有時一個主題能夠經過配置JS改變組件外觀。經過覆蓋主題包中的JavaScript就能夠實現。如，建立"packages/my-custom-theme/overrides/panel/Panel.js" ，代碼以下：

Ext.define('MyCustomTheme.panel.Panel', {

    override: 'Ext.panel.Panel',

    titleAlign: 'center'

});

 如今須要構建主題包來讓"packages/my-custom-theme/build/my-custom-theme.js"包含這個新的覆蓋文件。在"packages/my-custom-theme/" 下運行：

sencha package build

如今應該刷新應用程序,這樣在開發模式下運行應用程序會包括該主題的JS覆蓋文件。在 "theme-demo-app"下運行：

sencha app refresh

構建應用：

sencha app build

在瀏覽器中打開"theme-demo-app/index.html"觀看效果。

（原文地址：http://www.cnblogs.com/veralee/archive/2013/07/02/3167289.html）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程