title: extjs work properly in chrome but does't display anything in firefox or ie
body: <p>I have work this code properly in Chrome, but in Firefox i cant see any changes, just blank page. In console no errors. All files are loaded.
  I am not frontend developer, i wrote on python, ruby and java, maybe i do something wrong?
  But...
  What are hell is going on?! Its blow my mind.</p>
  
  <p>Its MVC app, i have many levels of nested files (with components)</p>
  
  <p><strong>template</strong>
  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}extjs/resources/css/ext-all.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" /&gt;
  
      &lt;script src="{{ STATIC_URL }}extjs/ext-dev.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="{{ STATIC_URL }}app.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong>
  </p>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true,
      disableCaching: false,
      paths: {C300App: '/static/c300app', Ext: '/static/extjs/src'}
  });
  Ext.require([
  ]);
  
  Ext.application({
      name: 'C300',
      appFolder:'/static/c300app',
      autoCreateViewport: true,
      controllers: ['Base'],
      models: [],
      views: [
              'Viewport'
              ,'Left'
              ,'CenterBase'
              ,'Header'
              ,'Footer'
      ],
      launch: function() {
      }
  });
  </code></pre>
  
  <p><strong>viewport</strong>
  </p>
  
  <pre><code>Ext.define('C300.view.Viewport', {
      extend: 'Ext.container.Viewport',
      layout: 'border',
      requires:[
          'C300.view.Header'
          ,'C300.view.Footer'
          ,'C300.view.Left'
          ,'C300.view.CenterBase'
      ],
      initComponent: function() {
          var me = this;
          Ext.applyIf(me, {
              border:true,
              items: [
                  Ext.create('C300.view.Header',{
                      region: 'north'
                  }),
                  Ext.create('C300.view.Left',{
                      region: 'west'
                  }),
                  Ext.create('C300.view.CenterBase', {
                      region: 'center'
                  }),
                  Ext.create('C300.view.Footer',{
                      region: 'south'
                  })
              ]
          });
          this.callParent();
      }
  });
  </code></pre>
  
  <p><strong>CenterBase</strong>
  </p>
  
  <pre><code>Ext.define('C300.view.CenterBase', {
      extend: 'Ext.tab.Panel',
      alias: 'widget.centerBase',
      itemId: 'centerBase',
  
      initComponent: function() {
          Ext.applyIf(this, {
              stateId: 'center-panel',
              collapsible: false,
              animCollapse: true,
              layoutConfig: {
                  titleCollapse: false,
                  animate: true,
                  activeOnTop: true
              },
              deferredRender: false,
              activeTab: 0,
              items: [{
                  title: 'Информация'
                  ,closable: true
                  ,autoScroll: true
                  ,html: '&lt;/br&gt;&lt;p style="margin-left:10px;"&gt;Welcome!&lt;/p&gt;'
              }]
  
          });
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p><strong>Controller</strong>
  </p>
  
  <pre><code>Ext.define('C300.controller.Base', {
      extend: 'Ext.app.Controller',
      views: [
          'Viewport'
          ,'Left'
          ,'CenterBase'
          ,'items.ItemWorkers'
          ,'items.ItemOrganization'
          ,'items.ItemServices'
      ],
      refs: [
          {
              ref: 'itemWorkers',
              selector: '#itemWorkers'
          },{
              ref: 'itemOrganization',
              selector: '#itemOrganization'
          },{
              ref: 'itemServices',
              selector: '#itemServices'
          },{
              ref: 'centerBase',
              selector: '#centerBase'
          }
      ],
  
      init: function() {
          console.log('Testing log');
          this.control({
              'button': {
                  click: function() {console.log('Tab click')}
              },
              '#itemWorkers':{
                  itemclick:function(view,rec,item,index,eventObj){
                      this.onElementClick(rec.data.id, rec.data.text)
                  }
              },
              '#itemOrganization':{
                  itemclick:function(view,rec,item,index,eventObj){
                      this.onElementClick(rec.data.id, rec.data.text)
                  }
              },
              '#itemServices':{
                  itemclick:function(view,rec,item,index,eventObj){
                      this.onElementClick(rec.data.id, rec.data.text)
                  }
              }
          });
      },
  
      onContentChange: function onload() {
          console.log('FFFFFF');
      },
  
      onElementClick: function(id, title) {
          console.log('tab is:'+title);
          var t = this.getCenterBase();
          var g = t.items.findIndex('title', title);
  
          if (g &gt;= 0){
              console.log(g);
              t.setActiveTab(g);
          } else {
              t.add({
                  title : title,
                  html : 'i am tab ',
                  closable : true
              });
              var current = t.items.findIndex('title', title);
              t.setActiveTab(current);
          }
  
      }
  });
  </code></pre>