其實間唔中中下雷都唔係新鮮事,今次想搞既係 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 去解法... 唉... 唔知會唔會整返好...


過去文章
2025 (9)
4 (5)
3 (1)
2 (3)
2024 (25)
11 (3)
10 (3)
9 (1)
3 (18)
2022 (6)
10 (1)
6 (2)
5 (1)
3 (1)
1 (1)
2021 (21)
11 (7)
7 (1)
6 (2)
5 (2)
4 (6)
3 (2)
2 (1)
2020 (92)
12 (1)
11 (2)
10 (4)
9 (10)
8 (5)
7 (1)
6 (3)
5 (1)
4 (4)
3 (25)
2 (7)
1 (29)
2019 (57)
12 (25)
11 (7)
9 (25)