Extjs5开发学习-06-使用图标字体来美化按钮.docx

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文件。htmlview plaincopy1. 2. 3. 4. 5. 6. app7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 至此准备工作结束，可以字体文件可以使用了。对于一个Button来说，在其文字前面放一个图标可以使用属性icon,iconCls,对于图标字体来说，可以使用iconCls属性，也可以使用glyph这个属性。我们先来看一段该css之中的设置：cssview plaincopy1. /*FontAwesomeusestheUnicodePrivateUseArea(PUA)toensurescreen2. readersdonotreadoffrandomcharactersthatrepresenticons*/3. .icon-glass:before4. content:f000;5. 6. .icon-music:before7. content:f001;8. 9. .icon-search:before10. content:f002;11. 12. .icon-envelope-alt:before13. content:f003;14. 从其css的描述中可以看出，其命名中就表示了该图标的名称，比如说icon-search是一个搜索的图标，在Button使用的时候,可以这样加入属性：javascriptview plaincopy1. 2. text:搜索,3. iconCls:icon-search4. ,5. text:设置,6. glyph:0xf0c97. 这二种方式加入的icon会有不同之处：，可以看出来用glyph设置的更好一些。为了找到这个数字，你先要去Font Awesome网站上找到你需要的图标，记下名称，然后打开 css 目录下的 font-awesome.css,从中找到该名称的.class值，然后记下content的值。现在我们对top和bottom中的相应按钮加入图标字体。javascriptview plaincopy1. Ext.define(app.view.main.region.Top,2. 3. extend:Ext.toolbar.Toolbar,4. 5. alias:widget.maintop,/定义了这个组件的xtype类型为maintop6. 7. items:8. xtype:image,9. bind:/数据绑定到MainModel中data的system.iconUrl10. hidden:!system.iconUrl,/如果system.iconUrl未设置，则此image不显示11. src:system.iconUrl/根据system.iconUrl的设置来加载图片12. 13. ,14. xtype:label,15. bind:16. text:/text值绑定到17. ,18. style:font-size:20px;color:blue;19. ,20. xtype:label,21. bind:22. text:system.version23. 24. ,-,25. text:菜单,26. glyph:0xf0c9,27. menu:28. text:工程管理,29. menu:30. text:工程项目31. ,32. text:工程标段33. 34. 35. ,36. text:主页,37. glyph:0xf01538. ,39. text:帮助,40. glyph:0xf05941. ,42. text:关于,43. glyph:0xf06a44. ,45. text:注销,46. glyph:0xf01147. ,-,-,48. text:搜索,49. glyph:0xf00250. ,51. text:设置,52. glyph:0xf01353. 54. 55. );javascriptview plaincopy1. Ext.define(app.view.main.region.Bottom,2. 3. extend:Ext.toolbar.Toolbar,4. 5. alias:widget.mainbottom,6. 7. items:8. bind:9. text:使用单位:pany10. ,11. glyph:0xf0f712. ,13. bind:14. text:用户:15. ,16. glyph:0xf00717. ,-,18. bind:19. text:pany20. ,21. glyph:0xf05922. 23. ,24. bind:25. text:26. 27. ,28. bind:29. text:service.phonenumber30. ,31. glyph:0xf09532. ,33. bind:34. hidden:!service.email,/绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏35. text:eMail:service.email36. ,37. glyph:0xf00338. ,39. bind:40. text:service.copyright41. 42. 43. ); 在修改了上面的glyph之后，还不能正确的显示图标，必须指定一下字体才行。修改Main.js,在里面加入初始化函数。javascriptview plaincopy1. initComponent:function()2. Ext.setGlyphFontFamily(FontAwesome);/设置图标字体文件，只有设置了以后才能用glyph属性