鼠标悬停在extjs 4.0上，将其委托给父节点

我想将mouseover/mouseout事件委托给我的父节点

在下面的代码中，当我转到#mycontent>span.bannerContent时，我应该将鼠标悬停事件委托给父母子女img#bannerImage

如何使用extjs实现

HTML代码：

<div>  
  <img id="bannerImage" />
<div id="mycontent"> 
    <span> my dummy content </span>
</div>

',
听众：{
**el:{
mouseover:function（）{
},
mouseout:function（）{
}**
}
}   
}
]

通常，您可以使用relayEvent将事件传递给任何可观察对象，但问题是Ext.dom.Element不可观察（不知道fireEvent方法）。因此，您可以在父div上侦听鼠标事件，也可以在box事件上钩住旋转木马，或者如果您坚持中继事件，则扩展Ext.Img，使其触发mouseout和mouseover事件本身（而不是其“el”），然后在此类事件上钩住旋转木马

items : [{
            xtype: 'image',
            id:'bannerview1',
            src: 'images/homePage/banner-1.jpg',
            height: 500,
            width: 1240,
            listeners: {
                el: {
                    click: function(el,src) {
                    var link =src.src;
                    if(link.indexOf("banner-1.jpg")!= -1){
                        window.open("main");
                     }                   
                    }
                }
            }
           },
           {
                xtype: 'box',
                id:'label',                      
                html: '<span class="bannerContent"></span> ',
                listeners: {
                     **el: {
                       mouseover:function(){

                       },
                       mouseout:function(){

                       }**
                     }
                }   
            }
    ]

Ext.define（'My.Img'{
扩展：“Ext.Img”，
别名：“widget.myimage”，
initComponent:function（）{
var me=这个；
me.addEvents（'mouseover'，'mouseout'）；
me.on（'render'，function（））{
me.getEl（）.relayEvent（'mouseover'，me）；
me.getEl（）.relayEvent（'mouseout'，me）；
});
me.callParent（）；
}
});
var myImage=Ext.create（'My.Img'{
id:‘bannerview1’，
身高：500，
宽度：1240，
src:“/img/header_01.gif”，
听众：{
鼠标悬停：功能（e）{
log（'mouseover image'）；
},
鼠标输出：函数（e）{
log（'mouseout image'）；
}
}
});
Ext.create（“…”{
...
项目：[myImage，
{
xtype:'框'，
id:“标签”，
html:“blabla”，
听众：{
render:function（）{
this.getEl（）.relayEvent（'mouseover'，myImage）；
this.getEl（）.relayEvent（'mouseout'，myImage）；
}
}
}
]
});

---

我个人认为，这种解决办法不是很简单

通过将事件传递给其他元素，您希望实现什么？使用dom遍历向上和向下函数直接从bannerImage事件处理程序操纵此元素不是更好吗？或者直接通过id查找，如果它在整个页面上是唯一的。不，我们已经实现了类似旋转木马的东西，但不完全是旋转木马，但它是使用extjs中的taskrunner实现的。实际上，我们正在阻止鼠标上的taskrunner访问mycontent范围内的横幅内容。因此，当mouseout再次删除该元素时，taskrunner启动了，这不应该是这种情况，因此我认为将事件委托给parents-child元素（img）可以解决这个问题。如果我错了，请给我一个解决方案

Ext.define('My.Img',{
    extend: 'Ext.Img',
    alias: 'widget.myimage',

    initComponent: function(){
        var me = this;
        me.addEvents('mouseover','mouseout');
        me.on('render',function(){
            me.getEl().relayEvent('mouseover',me);
            me.getEl().relayEvent('mouseout',me);
        });

        me.callParent();
    }
});

var myImage = Ext.create('My.Img',{
    id:'bannerview1',
    height: 500,
    width: 1240,
    src: '/img/header_01.gif',
    listeners: {
        mouseover:function(e){
            console.log('mouseover image');
        },
        mouseout:function(e){
            console.log('mouseout image');
        }
    }
});

Ext.create(' ... ',{
    ...
    items : [ myImage,
        {
            xtype: 'box',
            id:'label',
            html: '<span class="bannerContent">blablabla</span> ',
            listeners: {
                render: function(){
                    this.getEl().relayEvent('mouseover',myImage);
                    this.getEl().relayEvent('mouseout',myImage);
                }
            }
        }
    ]
});