Question

我是Ext Js 4的新手。我的问题相当简单，但我无法找到任何文件或任何论坛。我有一个xtype：'panel'，它有一个图像映射，上面有几个链接。我试图在该面板上添加一个监听器，以便我可以在我的“控制器”中控制它。我怎样才能实现这一点，以便我遵循MVC模型？

 {
    xtype:'panel',
    id:'tab2',
    html:
    '<div><img src="app/image/tableRoomPoster.jpg"  usemap=#conferenceRoom >'+
    '<map id="conferenceRoom" name="conferenceRoom">' + 
         '<div id ="remote"> <area shape="rect" alt="Remote" title="" coords="727,568,834,613" href="#" ></div>'+   
         '<div id ="virOfficeMain"><area shape="circle" alt="virOfficeMain" title="" coords="28,624,18" href="#" ></div>'+
     '</map></div>' +    

    '<div  id="toggleRemote" style="display:none"><img src="app/image/remoteShrink.png"  usemap=#controlRemote >'+
    '<map id="controlRemote" name="controlRemote">'+
            '<area id ="remoteOff" shape="circle" alt="Off" title="" coords="118,51,11" href="#" />'+   
                '<div class="playVideoMonitor" id="button1"style="display:none">'+
            '<area  shape="rect" alt="button1" title="" coords="20,74,42,87" href="#"/>'+
                '<iframe border:"block" width="302" height="174"src="http://www.youtube.com/embed/VHySPMCNS34" '+
                'frameborder="0" ></iframe></div>'+
            '<div class="playVideoMonitor" id="button2" style="display:none">'+
                '<area  shape="rect" alt="button2" title="" coords="61,75,85,89" href="#"/>'+
                '<iframe id="video2"width="302" height="174" src="http://www.youtube.com/embed/ts8Q6LwDMcs" '+
                'frameborder="0" allowfullscreen></iframe></map></div>' 

     }],
     listeners : {
         afterrender : function(c) {
             c.getEl().on('click', function(e){ 
                 this.fireEvent('click', c); 
             }, c);
         }
     }

Answer 1

您可以在侦听器上使用委托选项来侦听从Panel中嵌入的元素发出的事件。

这样的事情：

listeners: {
    el:{  
      'click':{
          delegate:'img', 
          fn:function (event, target) {
               //do something
           }
       }
    }
 }

顺便说一句，这个监听器直接在面板上，而不是在控制器中 - 所以它与你使用MVC的愿望无关。如果你想让控制器在//do something块中接管，那么你可以调用this.fireEvent('myEventName', somedata)，然后控制器将监听从你的面板发出的这个事件，然后它会对数据进行处理。 - 现在你有了MVC :)

Ext js 4控制来自控制器的监听器

1 个答案: