Extjs4 Ext js 4从控制器控制侦听器

Extjs4 Ext js 4从控制器控制侦听器,extjs4,Extjs4,我是Ext Js 4的新手。我的问题很简单,但我就是找不到任何文档或论坛。我有一个xtype:“panel”,它有一个带有多个链接的图像映射。我试图在面板上添加一个监听器,这样我就可以在我的“控制器”中控制它。我如何才能做到这一点,从而遵循MVC模式 { xtype:'panel', id:'tab2', html: '<div><img src="app/image/tableRoomPoster.jpg" usemap=#conferen

我是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);
         }
     }
{
xtype:“面板”,
id:'tab2',
html:
''+
'' + 
' '+   
''+
'' +    
''+
''+
''+   
''+
''+
''+
''+
''+
'' 
}],
听众:{
afterrender:函数(c){
c、 在('click',函数(e){
此.firevent('click',c);
}(c);
}
}

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

大概是这样的:

listeners: {
    el:{  
      'click':{
          delegate:'img', 
          fn:function (event, target) {
               //do something
           }
       }
    }
 }
顺便说一句,这个监听器直接在面板上,而不是在控制器中——因此它与您使用MVC的愿望没有关系。如果您想让控制器接管
//执行某些操作
块,则可以调用
this.firefevent('myEventName',somedata)
,然后控制器将侦听此事件从您的面板发出,然后它将对数据执行soemthing。-现在你得到了MVC:)