ボタンのUIにバインディングできるように工夫する

ボタンのテキストやUIをデータバインディングで変更したいときがあります。

テキストははじめからできるようになっているのですが、なぜかUIはできるようになっていません(注意：ExtJS6.5.2時点までの話です)。

根本的なところはsetUiメソッドが定義されていないからです（代わりにsetUIメソッドが存在しています）。

なので、下記のようなオーバーライドクラスを定義しておくことで対応できます。

/**
 * Ext.button.Buttonのオーバーライドクラス。
 *
 * @class Common.overrides.button.Button
 * @override Ext.button.Button
 */
Ext.define('Common.overrides.button.Button', {
    override: 'Ext.button.Button',

    setUi: function (ui) {
        this.setUI(ui);
    }
});

これで下記のようにuiへのバインディングが可能になります。

{
    xtype: 'button',
    ui: 'primary',
    bind: {
        text: '{buttonText}',
        ui: '{buttonUI}'
    }
}