任意のコンフィグを双方向バインディングに対応する
ビュー作成時に独自のコンフィグを追加することがあります。
ここでは追加したコンフィグをデータバインディングしてみます。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.panel.Panel', xtype: 'sample_panel', config: { text: null }, applyText: function (text) { var me = this; me.setHtml(Ext.String.htmlEncode(text)); return text; } });
まずはtextコンフィグを用意しました。
textコンフィグに値を設定すると、HTMLエンコードして画面に表示するようにしています。
Ext.define('Sample.view.sample.PanelModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.sample_panel', data: { text: '<b>Hello, World!!</b>' } });
textという値を持ったビューモデルを用意しました。
これをビューにデータバインディングします。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.panel.Panel', xtype: 'sample_panel', viewModel: 'sample_panel', config: { text: null }, bind: { text: '{text}' }, applyText: function (text) { var me = this; me.setHtml(Ext.String.htmlEncode(text)); return text; } });
これでビューモデル => ビューの一方向のデータバインディングとなります。
ビュー => ビューモデルについては、publishesコンフィグを指定する必要があります。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.panel.Panel', xtype: 'sample_panel', viewModel: 'sample_panel', config: { text: null }, publishes: { text: true }, bind: { text: '{text}' }, applyText: function (text) { var me = this; me.setHtml(Ext.String.htmlEncode(text)); return text; } });
これで、ビュー側でtextの値が変更されるとビューモデルの値に反映されるようになります。