I'm facing an strange behavior in an web application I'm currently working on. The interface is totally built with ExtJs 4. The application has two modes, Debug and Production.  

In Debug mode, when user click a menu item, I load synchronously, the dependent Javascripts file. Something like this:

```
for ( var i = 0; i &lt; config.dependency.length; i++ ) {
   var element = document.createElement('script');

   element.onload = callback;
   element.onreadystatechange = function () {
      if ( element.readyState == 'loaded' || element.readyState == 'complete' ) {
         callback();
      }
   };
}

```

One of the module's javascript file is like this:

module.js

```
Ext.define('Company.view.system.Module', {
   extend: 'Company.view.abstract.Panel', 
   alias: 'widget.system.module', 

   /**
    * These "_items" are built into the Object in `Company.view.abstract.Panel`
    * using: Ext.create(this._items[i].clazz, conf);
    *
    * I'm just omitting the whole business logic there
    */
   _items: [{
      flex: 2, 
      clazz: 'Company.view.system.module.Form'
   }, {
      flex: 5, 
      clazz: 'Company.view.system.module.HtmlEditor'
   }]
});

Ext.define('Company.view.system.module.Form', {
   extend: 'Company.view.abstract.Form', 
   alias: 'widget.system.module.form', 

   items: [{
      xtype: 'fieldset', 
      title: 'Module Grid', 

      items: [{
         xtype: 'system.module.grid'
      }]
   }]
});

Ext.define('Company.view.system.module.Grid', {
   extend: 'Company.view.abstract.Grid', 
   alias: 'widget.system.module.grid', 

   columns: [{
      ...
   }], 

    afterLayout: function() {
        this.callParent(arguments);
        alert('after layout');
    }
});

Ext.define('Company.view.system.module.HtmlEditor', {
   extend: 'Company.view.abstract.HtmlEditor', 
   alias: 'widget.system.module.htmleditor', 

   ...
});

```

Everything's working as expected in Debug mode. But in Production mode, I load the whole Modules as a single generated-minified-obfuscated javascript file (modules.js) at start up (i.e. before the ViewPort is rendered), instead of loading dependent modules after menu click event.  

In Production mode, every Items, which is instantiated using "xtype" (Company.view.system.module.Grid in the above sample), is not rendered at all!  

Screenshots of [Debug mode](http://yellowcluster.net/files/pic/debug-mode.png) and [Production Mode](http://yellowcluster.net/files/pic/production-mode.png).  

What do you think is going on here which I'm missing?

**Update:**
The problem lies with the `Height` of the GridPanel, as It was computed at runtime, from the browser's screen size. Hence when the component being instantiated, the Height was not computed yet! Silly mistake :)