アイコンフォント - 初心者のためのExtJS入門

ExtJS6.5では、FontAwesomeとPictosがパッケージに含まれています。

今回はそれらの使い方を取り上げます。

まずはapp.jsonでアイコンフォントのパッケージをrequiresに追記します。

"requires": [
  "font-awesome",
  "font-pictos"
]

あとはclass属性に使用したいフォントのセレクタ名を正しく指定するだけです。

例えばHTMLタグであればiタグに、ボタンのアイコンならiconClsに指定します。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    cls: 'sample-panel',

    padding: 50,
    bodyPadding: '15 0 0 0',

    tbar: {
        items: [
            {
                xtype: 'button',
                tooltip: '編集',
                iconCls: 'pictos pictos-pencil',
                scale: 'large'
            },
            {
                xtype: 'button',
                tooltip: '編集',
                iconCls: 'x-fa fa-pencil',
                scale: 'large'
            }
        ]
    },

    html: [
        '<i class="pictos pictos-pencil"></i>',
        '<i class="x-fa fa-pencil"></i>'
    ]
});