跟我一起學extjs5(06--使用表徵圖字型來美化按鈕)
sencha 的例子中，有使用表徵圖字型來美化按鈕的例子，這個用起來又方便風格又統一，例如：
上面表徵圖字型的使用方法也很簡單，只要下載Font Awesome的css和表徵圖檔案，放到項目裡就可以了。部分表徵圖：
Font Awesome的網站為：點擊開啟連結。進入網站後，先下載Font Awesome 3.0,解壓縮後，將css和font目錄拷貝到war目錄下。
檔案拷貝進來以後，需要在index.html中引入css檔案。<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>app</title><!-- 引入Font Awesome的css檔案 --><link type="text/css" rel="stylesheet" href="css/font-awesome.css"><!-- The line below must be kept intact for Sencha Cmd to build your application --><script id="microloader" type="text/javascript" src="bootstrap.js"></script></head><body></body></html>
至此準備工作結束，可以字型檔可以使用了。對於一個Button來說，在其文字前面放一個表徵圖可以使用屬性icon,iconCls,對於表徵圖字型來說，可以使用iconCls屬性，也可以使用glyph這個屬性。我們先來看一段該css之中的設定：/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */.icon-glass:before { content: "\f000";}.icon-music:before { content: "\f001";}.icon-search:before { content: "\f002";}.icon-envelope-alt:before { content: "\f003";}從其css的描述中可以看出，其命名中就表示了該表徵圖的名稱，比如說icon-search是一個搜尋的表徵圖，在Button使用的時候,可以這樣加入屬性：{text : '搜尋',iconCls : 'icon-search'}, {text : '設定',glyph : 0xf0c9}這二種方式加入的icon會有不同之處：，可以看出來用glyph設定的更好一些。為了找到這個數字，你先要去Font Awesome 網站上找到你需要的表徵圖，記下名稱，然後開啟 css 目錄下的 font-awesome.css,從中找到該名稱的.class值，然後記下content的值。現在我們對top和bottom中的相應按鈕加入表徵圖字型。Ext.define('app.view.main.region.Top', {extend : 'Ext.toolbar.Toolbar',alias : 'widget.maintop', // 定義了這個組件的xtype類型為maintopitems : [{xtype : 'image',bind : { // 資料繫結到MainModel中data的system.iconUrlhidden : '{!system.iconUrl}', // 如果system.iconUrl未設定，則此image不顯示src : '{system.iconUrl}' // 根據system.iconUrl的設定來載入圖片}}, {xtype : 'label',bind : {text : '{system.name}' // text值綁定到system.name},style : 'font-size : 20px; color : blue;'}, {xtype : 'label',bind : {text : '{system.version}'}}, '->', {text : '菜單',glyph : 0xf0c9,menu : [{text : '工程管理',menu : [{text : '工程項目'}, {text : '工程標段'}]}]}, ' ', ' ', {text : '首頁',glyph : 0xf015}, {text : '協助',glyph : 0xf059}, {text : '關於',glyph : 0xf06a}, {text : '登出',glyph : 0xf011}, '->', '->', {text : '搜尋',glyph : 0xf002}, {text : '設定',glyph : 0xf013}]});
Ext.define('app.view.main.region.Bottom', {extend : 'Ext.toolbar.Toolbar',alias : 'widget.mainbottom',items : [{bind : {text : '使用單位:{user.company}'},glyph : 0xf0f7}, {bind : {text : '使用者:{user.name}'},glyph : 0xf007}, '->', {bind : {text : '{service.company}'},glyph : 0xf059}, {bind : {text : '{service.name}'}}, {bind : {text : '{service.phonenumber}'},glyph : 0xf095}, {bind : {hidden : '{!service.email}', // 綁定值前面加！表示取反，如果有email則不隱藏，如果email未設定，則隱藏text : 'eMail:{service.email}'},glyph : 0xf003}, {bind : {text : '©{service.copyright}'}}]});
在修改了上面的glyph之後，還不能正確的顯示表徵圖，必須指定一下字型才行。修改Main.js,在裡面加入初始化函數。
initComponent : function() {Ext.setGlyphFontFamily('FontAwesome'); // 設定表徵圖字型檔，只有設定了以後才能用glyph屬性this.callParent();},
經過以上的操作，表徵圖字型就可以正常顯示了。具體效果如下：
細節決定成敗，雖然加了表徵圖字型的按鈕比較好看，但是最好把外框和背景去掉，只有滑鼠移上去的時候才顯示。下一節我們繼續Button建立一個自訂的Button,讓他的背景是透明的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
