How to make glyphs work in Sencha Architect and Ext JS

In Sencha Ext JS 4.2 and Touch 2.2 (I think) it is possible to work with so called "glyphs". These are graphic icons from vector images. The nice thing about this is that you can avoid the iconCls property when adding icons to buttons, tabs or panel headers.

Now Sencha has a nice Kitchensink demo application where this is shown, but any documentation is missing. I will show you how you can have it working in less than 10 minutes (after finishing reading this article that is).

Step 1. Get yourself an icon font

For our example we will use the FontAwesome font. It is for free and can be found here.

http://fortawesome.github.io/Font-Awesome/

Download the font, it will get you a zip archive. The link below will show you a cheatsheet with all the icons available in this font. You will need this later for reference.

http://fortawesome.github.io/Font-Awesome/cheatsheet/

Step 2. Create/Modify your application custom css

As I am developing my application with Sencha Architect I have created a css resource to my application. I have called it fonts.css. If you are not using Architect, just create a fonts.css in your own application resources folder. It is important that this file has an easy path to the fonts.

Now unzip the fonts archive from step 1 in a folder called fonts, relative to your css. The directory structure looks like this.

In the font-awesome-4.0.3 I have put all the content of the zip archive. No modification what so ever.

fonts.css

Now put the following code in the fonts.css file you just have created. If you use Architect you can do it there, otherwise use your favorite editor.

I have put the @font-face code in a css for I couldn’t get it to work with SASS and the relative path to the fonts folder.

Step 3. Make it work

We will test it now on a button.

First we go back to the cheatsheet from step 1. We select the icon we want on our button.

image

For our button I am going to use the looking glass at fa-search. It shows that it has code &#xf002. This code is the key to the whole process. In Sencha Architect you click on the button.

image

Now type in config search bar (right below) "glyph".

image

The only thing you have to do now is to enter the right code in the "glyph" property.

image

In Architect the result is immediately shown. You don’t have to publish your program first.

As you can see we only use the "xf002". If you are not using Architect then the following code is generated.

Final thoughts

There are more free icon fonts on the internet. I have used the FontAwesome for it looks good with my application. Sencha is using the "pictos" font. But this one is not for free, that is if you need more than 12 icons at a time.

What I don’t like at all that it has cost me quite some time to figure it out. Mainly because Sencha did a lousy job on the documentation and the samples.

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Comments

  1. Alexander

    Thank you! I was doing the same, wasting hours trying to understand why is not working and why is so miss-documented

    The only different thing I did was just load the original font-awesome.css, in my case:
    ‘../js/extjs/resources/font-awesome-4.0.3/css/font-awesome’

  2. Su

    Thank you Johan! I love font awesome and ExtJS, just have a quick question, how to change the color of the glyph?

    • Johan van de Merwe

      Hello Su, although not ideal, but you could add a class to the button (cls: config), give it as a name f.e.
      ‘xf002’ where you have used as glyph xf002@FontAwesome. Then you can add a CSS style in your app’s stylesheet .

      You can now add the style rule:

      .xf002 .x-btn-glyph {
      color: red
      }

      This you can do for all glyphed buttons that you are using.

      For a panel header “glyph” icon you can use the “.x-panel-header-glyph” class, but also here put the font specification as an extra “cls” in the config of your panel.

      Read also this article to make glyphing a bit easier: Turn your ExtJS 4 singletons into heavy and useful workers

  3. Diane

    Nice post! Helped a lot!

    Can I use the fontawsome only with glyph property?
    I wanna use these icons inside a container, but the container doesn’t have glyph property…
    what should I add inside the container to use icons? (except menu Item as it’s not a menu…)

  4. steward

    “What I don’t like at all that it has cost me quite some time to figure it out. Mainly because Sencha did a lousy job on the documentation and the samples.”

    AMEN TO THAT.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.