ExtJs5_使用表徵圖字型來美化按鈕

標籤：style   blog   http   io   color   ar   使用   sp   java   

sencha 的例子中，有使用表徵圖字型來美化按鈕的例子，這個用起來又方便風格又統一，例如：

        上面表徵圖字型的使用方法也很簡單，只要下載Font Awesome的css和表徵圖檔案，放到項目裡就可以了。部分表徵圖：

        Font Awesome的網站為：點擊開啟連結。進入網站後，先下載Font Awesome 3.0,解壓縮後，將css和font目錄拷貝到war目錄下。

(Font Awesome最新版本為4.0,網址為：http://fontawesome.io/ )

        檔案拷貝進來以後，需要在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類型為maintop            items : [{                        xtype : ‘image‘,                        bind : { // 資料繫結到MainModel中data的system.iconUrl                            hidden : ‘{!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,讓他的背景是透明的。

ExtJs5_使用表徵圖字型來美化按鈕