ExtJSのボタンやメニューでアイコンフォントを使う | Sencha Advent Calendar 2014 – 6日目

前回書いた記事が2013年のAdvent Calendarって・・・。
一年はあっという間ですね。

ということでSencha Advent Calendar 2014の6日目です。
すごく初歩的な感じですが・・・、
ExtJSのボタンやメニューでアイコンフォントを使うTipsを紹介します。

ボタンやメニューではiconClsプロパティを使ってアイコンを表示する方法が昔からありますが、ExtJS4.2以降ではglyphプロパティというプロパティを使ってアイコンフォントが使うことができるようになっています。glyphプロパティが使えるコンポーネントは、以下のコンポーネントです。

  • Ext.button.Button
  • Ext.Img
  • Ext.menu.Item
  • Ext.panel.Header
  • Ext.panel.Panel

今回はFont Awesomeを使った例を紹介します。

設置

Font Awesomeよりファイルをダウンロードします。
解凍するとfontsディレクトリにフォントファイルが入っているので、それをExtJSアプリケーションのresourcesディレクトリにコピーします。

font-familyの定義

sass/etc/all.scss を作成してfont-faceを定義します。

定義したらとりあえず、sencha app watchを実行してみます。

実行するとbuild/developmentディレクトリに設置したフォントファイルがコピーされていることが確認できると思います。

JSコードを書く

フォントファミリーを定義したらJSコードを書いていきます。

glyphプロパティでアイコンを指定するには、どのフォントファミリーを使うかをコンポーネントに教えてあげます。
指定方法には2つ方法があり、それぞれglyphプロパティでのUnicodeの指定方法が異なります。

Ext.setGlyphFontFamilyで定義する場合

プロジェクト全体で同じアイコンフォントを使う場合、 Ext.setGlyphFontFamilyでフォントファミリーをセットします。
このメソッドを呼ぶタイミングは、glyphプロパティを使うコンポーネントのインスタンスができる前ならどこでもいいですが、Applicationクラスのinitメソッドが一番適してると思います。
autoCreateViewportを使う場合はlaunchメソッドだとフォントファミリーをセットする前にインスタンスができるので、initメソッドじゃないとうまくいかずハマリました。(´・ω:;.:…

ちなみにApplicationクラスでは、Ext.app.Application#updateGlyphFontFamilyというメソッドも用意されています。

glyphプロパティでは16進数で定義します。

glyphプロパティでUnicodeとフォントファミリーを直接定義する

もう一つはglyphプロパティで直接定義する方法です。
この場合は文字列で定義します。

「アイコンのUnicode@フォントファミリー」の形式でglyphプロパティを定義すると、@以降の文字をフォントファミリーとして判断してくれます。
一部のコンポーネントで、違うアイコンフォントを使いたい場合とかに便利ですね。

FontAwesomeの場合はCSSクラスも用意されているので、iconClsプロパティで使うこともできるのですがアイコンによっては、若干ズレたりします。
私のCSS力が弱いだけな気がしますが・・・。

今回はFontAwesomeを使いましたが、IcoMoonPictosなど他のアイコンフォントでも同様に使えます。
FontAwesomeとIcoMoonを使ったサンプルをGitHubに置いてますので、参考にしてください。

明日は、yasutomo.gotoさんです!