5、手把手教你Extjs5(五)使用图标字体来美化按钮)
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(五)使用图标字体来美化按钮)的更多相关文章
- ExtJs5_使用图标字体来美化按钮
sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...
- Extjs 使用图标字体来美化按钮)
1. 使用Font Awesome,下载地址http://www.bootcss.com/p/font-awesome/#icons-new 2. 把font和css目录放到 Ext的app目录下面 ...
- extjs基础 使用图标字体来美化按钮)
下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...
- 7、手把手教你Extjs5（七）自定义菜单1
顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单.由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时 ...
- 15、手把手教你Extjs5（十五）各种Grid列的自定义渲染
Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...
- 25、手把手教你Extjs5（二十五）Extjs5常用组件--form的基本用法
Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...
- 13、手把手教你Extjs5（十三）模块字段和Grid列的定义[1]
这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...
- 18、手把手教你Extjs5（十八）模块记录的拖放删除、拖放复制新增
网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...
- 10、手把手教你Extjs5（十）自定义模块的设计
从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...
随机推荐
- Java利用POI生成Excel强制换行
前一段时间在做一个学校排课系统时,有一个地方需要利用把课程表生成excel汇出给客户,由于之前用excel都只是简单的应用,在单元格里都是用自动换行,而这次可能需要用到手动强制换行. 于是我在网上找了 ...
- Tourists
Tourists 时间限制: 5 Sec 内存限制: 64 MB 题目描述 In Tree City, there are n tourist attractions uniquely labele ...
- OpenGL网络资源
转 十大OpenGL教程 1．http://nehe.gamedev.net/这个是我觉得全世界最知名的OpenGL教程,而且有网友将其中48个教程翻译成了中文http://www.owlei.com ...
- 4位开锁<dfs>
题意: 有一个四位密码的锁,每一位是1~9的密码,1跟9相连.并且相邻的连个密码位可以交换.每改变一位耗时1s,给出锁的当前状态和密码,求最少解锁时间. 思路: 用bfs枚举出所有相邻交换的情况,并记 ...
- MVVM 入门介绍
转载自:http://www.objccn.io/issue-13-1/ 我于 2011 年在 500px 找到自己的第一份 iOS 开发工作.虽然我已经在大学里做了好几年 iOS 外包开发,但这才是 ...
- xntp的配置
ntpdate以一种非常粗暴的方式一次性完成设置时钟.由于实时时钟飘移,你需要周期性的矫正.基本上可以通过设置一个cron例行任务来运行ntpdate,但是你的机器从此就不能是ntp服务器了. 相反, ...
- VideoView的视频的全屏播放
import android.net.Uri;import android.os.Bundle;import android.app.Activity;import android.content.I ...
- Jenkins中集成python，支持参数生成Makefile文件
#!/usr/bin/env python import os print os.getenv("BUILD_NUMBER") print os.getenv("uuid ...
- redhat安装wine
在基于RedHat或Debian的系统上安装 Wine 1.7 原创:LCTT https://linux.cn/article-3723-1.html Wine,Linux上最流行也是最有力的软件, ...
- ORACLE中CHAR、VARCHAR、NVARCHAR
1. char 固定长度,最长n个字符. 2. varchar 最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同) char和varchar区别: ...