跟我一起学extjs5(06--使用图标字体来美化button)

sencha 的样例中，有使用图标字体来美化button的样例，这个用起来又方便风格又统一，比例如以下图：

上面图标字体的用法也非常easy，仅仅要下载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>


<link type="text/css" rel="stylesheet" href="css/font-awesome.css">


<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中的对应button增加图标字体。
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 : 'project管理',
									menu : [{
												text : 'project项目'
											}, {
												text : 'project标段'
											}]
								}]
					}, ' ', ' ', {
						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创建一个自己定义的Button,让他的背景是透明的。

跟我一起学extjs5(06--使用图标字体来美化button)

跟我一起学extjs5(06--使用图标字体来美化button)

猜你喜欢