ExtJS应用程序在调试和缩小模式下的不同行为

我目前正在开发的web应用程序中遇到了一个奇怪的行为。该接口完全是用ExtJs 4构建的。该应用程序有两种模式，调试和生产

在调试模式下，当用户单击菜单项时，我会同步加载依赖的Javascript文件。类似于以下内容：

for ( var i = 0; i < config.dependency.length; i++ ) {
   var element = document.createElement('script');
   element.onload = callback;
   element.onreadystatechange = function () {
      if ( element.readyState == 'loaded' || element.readyState == 'complete' ) {
         callback();
      }
   };
}

模块的一个javascript文件如下所示：
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', 
   ...
});

调试模式下一切正常。但在生产模式下，我在启动时（即在渲染ViewPort之前）将整个模块加载为单个生成的缩小模糊javascript文件（Modules.js），而不是在菜单单击事件之后加载依赖模块

在生产模式中，使用"xtype"（上面示例中的Company.view.system.module.Grid）实例化的每个Items根本不会渲染

调试模式和生产模式的屏幕截图

你认为这里发生了什么事，而我却不知道？

更新：问题在于GridPanel的Height，因为它是在运行时根据浏览器的屏幕大小计算的。因此，在实例化组件时，尚未计算高度！愚蠢的错误：）