extjs 4.0 делегировать родительскому узлу мыши над

Я хотел делегировать событие mouseover/mouseout на родительский узел.extjs 4.0 делегировать родительскому узлу мыши над

Здесь, в приведенном ниже коде, когда я пролонгировать к #mycontent> span.bannerContent, я должен передать свое событие курсора, находящегося на родителей ребенка IMG # bannerImage.

Как я могу достичь с помощью ExtJS

HTML код:

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

ExtJS код

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(){ 

         }** 
        } 
       } 
      } 
    ]

источник

2016-02-22 PCA

Что вы хотите достичь, передав событие другому элементу? Не лучше ли манипулировать этим элементом непосредственно из обработчиков событий bannerImage, используя функции перемещения вверх и вниз по дому? Или напрямую по поиску id, если он уникален на всей странице. – Miisha

Нет, мы внедрили карусель, но не совсем карусель, но он реализован с помощью taskrunner в extjs. Мы фактически прекращаем работу над наводкой на этом баннерном контенте, который находится внутри диапазона mycontent. Поэтому, когда мышь этого элемента снова запускается taskrunner, который не должен быть так, я думал, что делегирование события дочернему элементу родителей (img) будет работать для решения этой проблемы. Пожалуйста, предложите мне решение, если я ошибаюсь – PCA

Обычно вы можете передать событие к любому наблюдаемому с использованием relayEvent, но проблема в том, что Ext.dom.Element не наблюдается (не знает метод fireEvent). Таким образом, вы можете прослушивать события мыши в родительском div, карусели крюка также на событиях коробки или если вы настаиваете на ретрансляции событий, расширяйте Ext.Img таким образом, чтобы он запускал события мыши и мыши, а не его «el», а затем перехватывал вашей карусели на таких мероприятиях.

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); 
       } 
      } 
     } 
    ] 
});

Лично я считаю, что такое решение не очень простое.

источник

2016-02-23 14:02:27 Miisha

extjs 4.0 делегировать родительскому узлу мыши над

ответ

Смежные вопросы