title: ExtJS - Access variables from different files
body: <p>What I want to do is adding several panels to a tab panel. The tab panel and the panels are in different files (File1, File2, File3) and the code is inside anonymous functions. What is the easiest and/or best way to make this work?</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;script type="text/javascript" src="File1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="File2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="File3.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>File1.js</p>
  
  <pre><code>Ext.application({    
      name: 'app',    
      launch: function() {
          var tabPanel = Ext.create('Ext.tab.Panel', {
              id: 'tabPanel',
              ...
          });
      }
  });
  </code></pre>
  
  <p>File2.js</p>
  
  <pre><code>function() {
      var panel1 = Ext.create('Ext.panel.Panel', {
          ....
      });
      tabPanel.add(panel1); // Of course not working since tabPanel of File1.js is private
  }
  </code></pre>
  
  <p>File3.js</p>
  
  <pre><code>function() {
      var panel2 = Ext.create('Ext.panel.Panel', {
          ....
      });
      tabPanel.add(panel2); // Of course not working since tabPanel of File1.js is private
  }
  </code></pre>