title: ExtJS 4 can't listen to events from component inside tab
body: <p>I defined a tabpanel with several tabs, in one of them I have a panel with a grid and something else. I defined a controller to get the events from the grid. While I can get the event from the panel it's impossible to get events from the grid.</p>
  
  <p>Here's the viewport is here:</p>
  
  <pre><code>Ext.define('test.MyViewport', {
    extend: 'Ext.container.Viewport',
  
    layout: 'fit',
  
    items: {
        xtype: 'tabpanel',
        items: [{
            title: 'Tab 1',
            html: 'something'
        },{
            title: 'Tab 2',
            xtype: 'mypanel'
        },{
            title: 'Tab 3',
            html: 'something else 2'
        }]
    }
  </code></pre>
  
  <p>Here's the panel:</p>
  
  <pre><code>Ext.define('test.MyPanel', {
      extend: 'Ext.container.Container',
      alias: 'widget.mypanel',
  
      layout: {
          type: 'hbox',
          border: 1
      },
  
      items: [{
          xtype: 'mygrid',
          width: 300
      },{
          xtype: 'component',
          html: 'Hello There'
      }]
  });
  </code></pre>
  
  <p>And here's the controller:</p>
  
  <pre><code>Ext.define('test.MyController', {
      extend: 'Ext.app.Controller',
  
      init: function() {
          this.control({
              'mypanel': { show: function(){console.log( "Show Panel" );} },
              'mygrid': { show: function(){console.log( "Show Grid" );} }
          });  
      }
  });
  </code></pre>
  
  <p>The complete code can be tested in this <a href="http://jsfiddle.net/zGVXK/" rel="nofollow">fiddle</a>.</p>
  
  <p>I tried many different selectors:</p>
  
  <pre><code>mypanel mygrid
  #my-grid-id  (setting itemId on the grid item in the panel)
  mypanel #my-grid-id
  ...
  </code></pre>
  
  <p>With no success. I've spent two days on this and don't have a clue on how to solve it. Should I start a different controller for that specific view? If so where should I put it?</p>
  
  <p>Thanks a lot</p>