ボタンの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}' } }