hexawing
2011-07-22 12:36 阅读 346

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

我用到了一个自定义的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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    cyrilluce cyrilluce 2011-07-25 14:41

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

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

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

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

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

    点赞 评论 复制链接分享
  • cyrilluce cyrilluce 2011-07-23 10:21

    也就是组件之间进行联动吧?
    你可以将它们定义为局部变量,再放入items中,联动逻辑就不用写在组件内了。

    假定前面的conbotree选中值后会有change事件(如果没有,你也可以自己定义并发出事件)

    [code="js"]
    // 假设你是扩展的组件,在initComponent中初始化items的
    initComponent : function(){
    ...
    var field1, field2;
    field1 = new XXX();
    field2 = new XXX();
    field1.on("change", function(){
    field2.setValue(field1.getValue());
    });
    this.items = [field1, field2]
    ...
    }
    [/code]

    点赞 评论 复制链接分享

相关推荐