ExtJS自定义组件中的事件传递问题

Question

我用到了一个自定义的combotree组件(ExtJS 4.0)，如下
[code="java"]
Ext.define("Ext.ux.comboboxtree", {
extend: "Ext.form.field.Picker",
requires: ["Ext.tree.Panel"],
alias: 'widget.combotree',
"initComponent": function() {
var self = this;
Ext.apply(self, {
fieldLabel: self.fieldLabel,
labelWidth: self.labelWidth,
store: self.store
});
self.callParent();
},
"createPicker": function() {
var self = this;
var store = this.store;
self.picker = new Ext.tree.Panel({
height: 150,
autoScroll: true,
floating: true,
focusOnToFront: true,
shadow: true,
ownerCt: this.ownerCt,
useArrows: true,
store: store,
rootVisible: false,
resizable: true
});
self.picker.on({
"itemdblclick": function(combotree, rec){
if(rec.get('leaf')){
self.setRawValue(rec.get('id'));
self.setValue(rec.get('text'));
self.picker.hide();
//我想在这里做点什么，以供调用此combotree的“外部”位置使用，但我不知道该怎么做……
}
}
});
return self.picker;
},
"alignPicker": function() {
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyElisAbove ? 'addCls' : 'removeCls';
picker.elisAbove ? 'addCls' : 'removeCls';
}
}
}
});
[/code]

页面里我具体想做的事是这样：
[code="java"]
{
fieldLabel: '生产厂家',
name: 'producer',
id: 'producer',
xtype: 'combotree',
store: store
//我想这里选择一个值的时候，也就是上面combotree里的itemdblclick的时候，给下面这个combotree“销售厂家”也赋某一个值
},{
fieldLabel: '销售厂家',
name: 'vendor',
id: 'vendor',
xtype: 'combotree',
store: store
}
[/code]
但我实在是不太明白这里的传递关系…… :x

Answer 1

你的问题不就是这样吗？两个combotree之间进行联动

我这里演示的field1和field2就是两个组件，现在只是将它提取出来创建，而不是一次性写在它们父容器的items里。利用闭包的特性让事件监听函数能直接访问到它们俩。

[b]按照oo的思想，位置1（即combotree1内部）是不应该能访问到外部的其它组件的[/b]，这破坏了封装，导致耦合度增加，代码结构变复杂。
正确的做法是使用观察者模式（Observer），在Ext中即事件&监听机制
a发出事件e，b监听a的e事件，这样a就不必知道谁要联动以及怎么联动。这样即实现了解耦合

所以我前面说了，combotree选中值后应该有change事件，如果没有自己在第一段注释那加个自定义事件，反正就是用于告诉外部“我的值被更改了”
然后第二个组件去监听这个事件，就实现了联动

以后第一个组件实现换了，只用保证事件同样发出
第二个组件换了或有第三个组件进行联动，也只用换个或多加个监听注册。