其實間唔中中下雷都唔係新鮮事,今次想搞既係 custom component 可以連得返去 parent component 個 viewmodel binding,講多無謂睇 code 最實制。 ```js { // 整左一個 textfield 叫做 username, bind 左去 viewmodel 個 username 度 bind: { value: '{username}', }, xtype: 'textfield', fieldLabel: 'username', value: '', } ``` 上面係好正常可以運作,對於個 `textfield` 來講,`value` 係佢呀 `config`。當 viewmodel 個 username 變動時,就會叫埋佢個 `setValue()` 去 update 返 `textfield` 個 `value`。 但係如果你自己整左個 component 出來,咁要做先可以連到呢? 一齊睇下下面呢個。 ```js // 整左個自訂 component 出來 Ext.define('App.MyComponent', { extend: 'Ext.panel.Panel', alias: 'widget.app-mycomponent', config: { value: '', }, viewModel: { data: { value: '', }, }, layout:{ type: 'vbox', }, items:[{ bind: { value: '{value}', }, xtype: 'textfield', fieldLabel: 'username', value: '', }] }); // 然後再 create 一個 panel Ext.create('Ext.panel.Panel', { itemId: 'panel1', viewModel: { data: { value: '', }, }, layout:{ type: 'vbox', }, items:[{ itemId: 'panel2', bind: { value: '{value}', }, xtype: 'app-mycomponent', }] }); ``` 現在當 `#panel1` 的 viewModel value 變動時,就會連動埋 bind 左個 component (app-mycomponent) 入面個 value 都會更新。 但係如果我現係係 `#panel2` 度 call 個 `setValue()`,你估會唔會可以反向更新返 `#panel1` 個 viewModel 呢??? 答案係唔會 !!!! 除非要加一個 `config` 入去 `#panel2` 個 define 入面,就係 `publishes` 睇下下面: ```js // 下面係改動左 Ext.define('App.MyComponent', { extend: 'Ext.panel.Panel', alias: 'widget.app-mycomponent', config: { value: '', }, publishes: { value: true, // 呢度個 value 係指 config 個 value, 咁當呢個 instance call .setValue() 時,如果出面有 viewModel bind 到呢個 value 就會一齊更新 }, viewModel: { data: { value: '', }, }, layout:{ type: 'vbox', }, items:[{ bind: { value: '{value}', }, xtype: 'textfield', fieldLabel: 'username', value: '', }] }); ``` 呢啲野都係 document 上面寫到唔清唔楚又無好好介紹點用... 搵左勁耐先搵到。 但係仲有樣野解決唔到,就係點樣可以 listen 個 config change? 因為 config 轉左其實我係唔知道佢轉左,所以 update 唔到相應既 component。 雖然可以通過 override setValue() 呢個方法去做,但係唔知點解 ExtJS 7.0.0 個 community edition 係有 bug... 係用唔到 this.callParent(arguments) ... 變左係無得用 override 去解法... 唉... 唔知會唔會整返好...