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