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

5、手把手教你Extjs5(五)使用图标字体来美化按钮)的更多相关文章

  1. ExtJs5_使用图标字体来美化按钮

    sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...

  2. Extjs 使用图标字体来美化按钮)

    1. 使用Font Awesome,下载地址http://www.bootcss.com/p/font-awesome/#icons-new 2. 把font和css目录放到 Ext的app目录下面 ...

  3. extjs基础 使用图标字体来美化按钮)

    下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...

  4. 7、手把手教你Extjs5（七）自定义菜单1

    顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单.由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时 ...

  5. 15、手把手教你Extjs5（十五）各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

  6. 25、手把手教你Extjs5（二十五）Extjs5常用组件--form的基本用法

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...

  7. 13、手把手教你Extjs5（十三）模块字段和Grid列的定义[1]

    这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...

  8. 18、手把手教你Extjs5（十八）模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  9. 10、手把手教你Extjs5（十）自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

随机推荐

  1. 使用jquery的js的页面实现例子

    var validate;var nodeId="";var modifyappId=""; addExportTaskURL = ctx + "/x ...

  2. HUD 1541/BIT(数状数组)

    题目链接 /* 按从左到右,从下到上的顺序给出星星的坐标,计算出level为[0,n)的星星的个数. 星星的level为该星星左下边(包括自己正下方的星星,但是不包括自己)星星的个数. BIT模板题. ...

  3. Android Studio中配置及使用OpenCV示例

    Android Studio配置及使用OpenCV 前言:最近在做项目移植,项目较大,在Eclipse中配置的Jni及OpenCV环境没任何问题,但是迁移到Studio中就问题一大堆,网上也找了一些资 ...

  4. 在windows系统用odbc连接

    当连接的数据出现失败时,出现数据库别名仍然存在,但还是要用这个别名重新建立连接 在windows客户端,用输入db2cmd输入c:\Users\yexuxia>db2 list db direc ...

  5. elasticsearch使用jetty进行简单的权限控制

    默认elasticsearch是使用netty作为http的容器,由于netty并没有权限模块,所以默认es没有任何的权限控制,直接通过http就可以进行任何操作,除非把http禁用.但如果你使用el ...

  6. android:editable is deprecated: Use an <EditText> to make it editable

    问题:android:editable is deprecated: Use an to make it editable   意思:Android的:编辑是反对:使用<</span> ...

  7. linux的mount（挂载）NFS 共享，命令详解

    Linux下挂载(mount)光盘镜像文件.移动硬盘.U盘.Windows和NFS网络共享 linux是一个优秀的开放源码的操作系统,可以运行在大到巨型小到掌上型各类计算机系统上,随着 linux系统 ...

  8. Python中括号的区别及用途

    python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也叫做花括号{ }.其作用也各不相同,分别用来代表不同的python基本内置数据类型. python中的小括号( ):代表 ...

  9. P2P应用中的NAT穿透问题

    多年前曾经写过一个关于NAT钻洞的实验.现在发现那个做法在我现在的路由器上已经不管用了.经过一番搜索发现时过境迁,世界变化很快,新路由器已经是UPnP了.在这里重新理一下几种方法. 第一种,也是不太靠 ...

  10. 代码异味---Code smell

    程序员应该竭尽全力去写那些重复的代码.以下几点是我目前最需要改进的地方. 重复代码: 相同或者相似的代码存在于一个以上的地方. 长方法: 一个非常长的方法.函数或者过程. 巨类: 一个非常庞大的类. ...