【发布时间】：2012-03-22 17:34:25
【问题描述】：
我在当前正在处理的 Web 应用程序中遇到了一个奇怪的行为。界面完全使用 ExtJs 4 构建。应用程序有两种模式，Debug 和 Production。
在调试模式下，当用户单击菜单项时，我会同步加载依赖的 Javascripts 文件。像这样的东西：
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 文件是这样的：
模块.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）实例化的每个项目都不会被渲染！
Debug mode 和 Production Mode 的截图。
你认为我错过了什么？
更新：
问题在于 GridPanel 的Height，因为它是在运行时根据浏览器的屏幕大小计算得出的。因此，当组件被实例化时，高度尚未计算！愚蠢的错误:)
【问题讨论】：
标签： javascript extjs extjs4