ExtJS
Sencha
FontAwesome

Ext JS 6 でのアイコン指定

More than 1 year has passed since last update.

Sencha Ext JS 6 では FontAwesome がバンドルされています。

ボタンのアイコンなどはこれで指定するとイメージとか用意しなくていいし便利です。それにRetina などで表示したときに綺麗です。

指定の仕方は簡単です。


iconClsで

iconCls コンフィグでアイコンを指定する場合は、x-fa というクラスとアイコン名を指定します。アイコン名はFontAwesome cheetsheet に載っている名前です。

次のように指定します。

iconCls: 'x-fa fa-home'


glyph で

glyph で指定することも可能です。

その場合は、Cheetsheet の名前の横に置いている16進コードを使います。

さきほどの fa-home アイコンなら、 [] と表示されていると思います。

この x以降を使い、後に @FontAwesome をつけます。

次のように指定します。

glyph   : 'xf019@FontAwesome'

コンポーネントの中にアイコンを表示したいときには

html: '<i class="fa fa-compass"></i>',

と、<i> タグにクラスをセットします。