ExtJs5_使用圖標字體來美化按鈕

時間 2019-11-12

標籤 extjs5 extjs 使用圖標字體美化按鈕简体版

原文原文鏈接

sencha 的例子中，有使用圖標字體來美化按鈕的例子，這個用起來又方便風格又統一，例以下圖：javascript

上面圖標字體的使用方法也很簡單，只要下載Font Awesome的css和圖標文件，放到項目裏就能夠了。部分圖標截圖：css

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

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

文件拷貝進來之後，須要在index.html中引入css文件。bootstrap

<!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之中的設置：app

/* 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使用的時候,能夠這樣加入屬性：dom

{  
          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,讓他的背景是透明的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。