Learn Extjs5 with me (06--Use the icon font to beautify the button)

Learn Extjs5 with me (06--Use the icon font to beautify the button)

in Sencha's example, there are examples of using icon fonts to beautify the buttons, which are convenient and uniform in style, for example:


the use of the above icon font is also very simple, just download the font awesome CSS and icon files, put in the project will be. Some icons:

The Font awesome website is: Click the Open link. After entering the website, download the Font Awesome 3.0 and then copy the CSS and the font directory to the war directory after unzipping.

after the file is copied in, the CSS file needs to be introduced into the index.html.

<! DOCTYPE html>
  
Now that the preparation is finished, you can use the font file. For a button, you can use the attribute icon,iconcls to put an icon in front of its text, you can use the Iconcls property for the icon font, or you can use the Glyph property. Let's first look at the settings in the CSS:
  
  
/* Font Awesome uses the Unicode Private use Area (PUA) to ensure screens readers do not   read off random characters tha T represent icons */.icon-glass:before {  content: "\f000";}. Icon-music:before {  content: "\f001";}. Icon-search:before {  content: "\f002";}. Icon-envelope-alt:before {  content: "\f003";}
From the description of its CSS, it can be seen that the name of the icon, for example, Icon-search is a search icon, when the button is used, you can add the attribute:
  
  

  
{text: ' Search ', iconcls: ' Icon-search '}, {text: ' Set ', GLYPH:0XF0C9}
        These two ways to add the icon will be different:, you can see to use glyph set up a little better. To find this number, you first go to the font awesome  site to find the icon you need, write down the name, then open the CSS directory under Font-awesome.css, find the name of the. Class value, and then note the content value. Now let's add the icon font to the corresponding buttons in top and bottom.
  
Ext.define (' App.view.main.region.Top ', {extend: ' Ext.toolbar.Toolbar ', alias: ' Widget.maintop ',// The xtype type that defines this component is maintopitems: [{xtype: ' image ', bind: {///data is bound to the System.iconurlhidden in Mainmodel: ' {! System.iconurl} ',//If System.iconurl is not set, this image does not display src: ' {system.iconurl} '//Load picture According to the settings of System.iconurl}}, {xtype: ' Label ', bind: {text: ' {system.name} '///text value bound to System.name},style: ' font-size:20px; Color:blue; '}, {xtype: ' label ', bind: {text: ' {system.version} '}}, '-', ' {text: ' Menu ', Glyph:0xf0c9,menu: [{text : ' Project Management ', menu: [{text: ' project '}, {text: ' Project segment '} '}]}, ', ', ' {text: ' Home ', glyph:0xf015}, {text: ' Help ', glyph:0xf059 }, {text: ' About ', glyph:0xf06a}, {text: ' Logoff ', glyph:0xf011}, '--', '--', ' {text: ' Search ', glyph:0xf002}, {text: ' Settings ', glyph:0xf013}]});
  

  
Ext.define (' App.view.main.region.Bottom ', {extend: ' Ext.toolbar.Toolbar ', alias: ' Widget.mainbottom ', items: [{bind: {text: ' Using unit: {user.company} '},glyph:0xf0f7}, {bind: {text: ' User: {user.name} '},glyph:0xf007}, '-', ' {bind: {text  : ' {service.company} '},glyph:0xf059}, {bind: {text: ' {service.name} '}}, {bind: {text: ' {service.phonenumber} '},glyph : 0xf095}, {bind: {hidden: ' {!service.email} ',//binding value in front of add! Indicates reverse, if an email is not hidden, if email is not set, then hide text: ' Email:{service.email} '},glyph:0xf003}, {bind: {text: ' ©{service.copyright} ' }}]});
  
After modifying the above glyph, it is not possible to display the icon correctly, you must specify the font. Modify the main.js to include the initialization function inside.
  

  
Initcomponent:function () {ext.setglyphfontfamily (' fontawesome ');//Set icon font file, only set it later to use the Glyph attribute This.callparent ();} ,
  
After the above operation, the icon font can be displayed normally. The specific results are as follows:
  

  
The details determine success or failure, although the icon font of the button more beautiful, but it is best to remove the frame and background, only the mouse to move up the time to display. In the next section, we continue to button to create a custom button that makes his background transparent.