转自:http://blog.csdn.net/jfok/article/details/35994081
跟我一起学extjs5(06--使用图标字体来美化按钮)
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之中的设置:从其css的描述中可以看出,其命名中就表示了该图标的名称,比如说icon-search是一个搜索的图标,在Button使用的时候,可以这样加入属性:
- /* 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";
- }
这二种方式加入的icon会有不同之处:
- {
- text : '搜索',
- iconCls : 'icon-search'
- }, {
- text : '设置',
- glyph : 0xf0c9
- }
,可以看出来用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,让他的背景是透明的。