[英]Ext Js Attach Event Handler In Parent Container To Its Child Item
組件定義:
Ext.define('Retroplanner.view.dimension.DimensionMapping', {
alias: 'widget.dimensionMapping',
extend: 'Ext.form.Panel',
...
items: [{
xtype: 'combo'
}, ...
]
子項的“ select
”處理程序必須創建一個小部件並將該小部件添加到其父items
數組中。
在此子項中,它是其“選擇”處理程序,我可以通過一些搜索技術找到其父項。 但我想避免這種情況。 我也沒有父母的引用變量。
更好的方法是-在父項中創建函數,然后以某種方式將其附加到子項:
Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
onSiRemoteCombo: function(cmb, rec, idx) {
alert("select handler");
var newItem = Ext.widget('somexType');
this.items.add(newItem);
}
問題是,如何附加onSiRemoteCombo
?
我在這里找到了類似的解決方案: 如何為子組件的自定義事件創建偵聽器
首先,它對我不起作用。 我可以舉一個我嘗試使用的完整示例。 第二,我想通過最普通的方式/在普通的地方創建項目,而不是通過initComponent方法。 我想要類似的東西:
Ext.define('Retroplanner.view.dimension.DimensionMapping', {
...
afterRender: function() {
var me = this;
//exception here
//Uncaught TypeError: Cannot read property 'on' of undefined
me.items[0].on('select', onSiRemoteCombo, this);
},
items: [{
xtype: 'combo'
}, ...
],
onSiRemoteCombo: function(cmb, rec, idx) {
alert("Ttt");
var dimensionMapping = Ext.widget('propGrid');
this.getParent().add(dimensionMapping);
}
但我有一個例外:
//exception here
//Uncaught TypeError: Cannot read property 'on' of undefined
me.items[0].on('select', onSiRemoteCombo, this);
而且,在每個渲染之后都添加一個偵聽器,確實是一個壞主意。
是否有針對此類用例的最佳實踐? 理想情況下,如果它可以在不同版本的Ext JS中運行,至少在5.x和6.x中都可以
在孩子中附加處理程序並訪問其父級? 孩子不應該依賴父母。 只有父母應該知道該怎么辦。
解決此問題的一種方法是將組合項目組件的初始化包裝到窗體的initComponent
方法中。 這樣,在為組合設置偵聽器時,可以使用this.formMethod
引用表單方法。 這是一些代碼:
Ext.define('Fiddle.view.FirstForm', {
extend: 'Ext.form.Panel',
bodyPadding: 15,
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: 'combo',
fieldLabel: 'First Combo',
store: ['first', 'second'],
listeners: {
'select': this.onComboSelect
}
}]
});
this.callParent();
},
onComboSelect: function () {
alert('I am a first form method');
}
});
第二種方法是在組合上使用字符串偵聽器,並在窗體上將defaultListenerScope設置為true。 這樣,偵聽器功能將解析為表單的方法。 再次,一些代碼:
Ext.define('Fiddle.view.SecondForm', {
extend: 'Ext.form.Panel',
bodyPadding: 15,
defaultListenerScope: true,
items: [{
xtype: 'combo',
fieldLabel: 'Second Combo',
store: ['first', 'second'],
listeners: {
'select': 'onComboSelect'
}
}],
onComboSelect: function () {
alert('I am a second form method');
}
});
這是兩種方法的有效提琴: https : //fiddle.sencha.com/#view/editor&fiddle/27un
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.