title: How To Get Reference to base component in Viewport from pop up window in ExtJS 4
body: <p>I'm struggling with getting references and not using Ext.getCmp(..).  I understand why it is best not to use Ext.getCmp in production apps, primarily because of potential confusion around duplicated DOM id's.  I've create a basic sample below that I've put some comments in that I'm hoping, if I can find answers to will help me better understand how to get references.</p>
  
  <p>I'm also looking for some really good explanations, tutorials, etc on this topic.  I gather that learning how to do ComponentQuery's would be best but I'm not even sure if that is the case.  So without further words, here the code.  Please take a look at button event in pop up window for what I'm hoping to figure out.</p>
  
  <pre><code>Ext.define('MyApp.view.MyViewport', {
      extend: 'Ext.container.Viewport',
  
      layout: {
          type: 'border'
      },
  
      initComponent: function () {
          var me = this;
  
          Ext.applyIf(me, {
              items: [{
                  xtype: 'panel',
                  flex: 2,
                  region: 'center',
                  title: 'My Panel',
                  dockedItems: [{
                      xtype: 'toolbar',
                      dock: 'top',
                      items: [{
                          xtype: 'button',
                          text: 'MyButton',
                          listeners: {
                              click: {
                                  fn: me.onButtonClick,
                                  scope: me
                              }
                          }
                      }]
                  }],
                  items: [{
                      xtype: 'component',
                      html: '&lt;b&gt;my component&lt;/b&gt;'
                  }]
              }]
          });
  
          me.callParent(arguments);
      },
  
      onButtonClick: function (button, e, eOpts) {
  
          Ext.define('MyApp.view.MyWindow', {
              extend: 'Ext.window.Window',
  
              height: 250,
              width: 400,
              title: 'My Window',
  
              initComponent: function () {
                  var me = this;
  
                  Ext.applyIf(me, {
                      items: [{
                          xtype: 'button',
                          text: 'Want to get link to my component in window that opened this',
                          listeners: {
                              click: {
                                  fn: me.onButtonClick,
                                  scope: me
                              }
                          }
                      }]
                  });
  
                  me.callParent(arguments);
              },
  
              onButtonClick: function (button, e, eOpts) {
  
                  // I would like to set the html property of the 
                  //   component in the window below
                  //   I would like to do this efficintly
                  //   user itemId?
                  //   use componentquery?
                  //   use up/down/etc.
                  //   
                  //   Need help with componentquery, extjs help is not helpful for me
                  //   I need more basics I think.
  
  
                  this.up('panel').up('panel').down('component').html = '&lt;i&gt;set from button&lt;/i&gt;';
                  console.log(this.up('panel').up('panel').down('component'));
              }
  
          });
  
          var win = Ext.create('MyApp1.view.MyWindow', {});
          win.show();
  
  
      }
  
  });
  </code></pre>