title: Ext js 4 controlling listeners from the controller
body: <p>I am new to Ext Js 4. My question is fairly simply but I just cant find it any documents or  any forums. I have a xtype: 'panel' that has an image map with several links on it. I am trying to add a listeners on that panel so that I can control it in my "controller". How can I accomplish this so that I follow the MVC model?? </p>
  
  <pre><code> {
      xtype:'panel',
      id:'tab2',
      html:
      '&lt;div&gt;&lt;img src="app/image/tableRoomPoster.jpg"  usemap=#conferenceRoom &gt;'+
      '&lt;map id="conferenceRoom" name="conferenceRoom"&gt;' + 
           '&lt;div id ="remote"&gt; &lt;area shape="rect" alt="Remote" title="" coords="727,568,834,613" href="#" &gt;&lt;/div&gt;'+   
           '&lt;div id ="virOfficeMain"&gt;&lt;area shape="circle" alt="virOfficeMain" title="" coords="28,624,18" href="#" &gt;&lt;/div&gt;'+
       '&lt;/map&gt;&lt;/div&gt;' +    
  
      '&lt;div  id="toggleRemote" style="display:none"&gt;&lt;img src="app/image/remoteShrink.png"  usemap=#controlRemote &gt;'+
      '&lt;map id="controlRemote" name="controlRemote"&gt;'+
              '&lt;area id ="remoteOff" shape="circle" alt="Off" title="" coords="118,51,11" href="#" /&gt;'+   
                  '&lt;div class="playVideoMonitor" id="button1"style="display:none"&gt;'+
              '&lt;area  shape="rect" alt="button1" title="" coords="20,74,42,87" href="#"/&gt;'+
                  '&lt;iframe border:"block" width="302" height="174"src="http://www.youtube.com/embed/VHySPMCNS34" '+
                  'frameborder="0" &gt;&lt;/iframe&gt;&lt;/div&gt;'+
              '&lt;div class="playVideoMonitor" id="button2" style="display:none"&gt;'+
                  '&lt;area  shape="rect" alt="button2" title="" coords="61,75,85,89" href="#"/&gt;'+
                  '&lt;iframe id="video2"width="302" height="174" src="http://www.youtube.com/embed/ts8Q6LwDMcs" '+
                  'frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;&lt;/map&gt;&lt;/div&gt;' 
  
       }],
       listeners : {
           afterrender : function(c) {
               c.getEl().on('click', function(e){ 
                   this.fireEvent('click', c); 
               }, c);
           }
       }
  </code></pre>