我正在处理我正在处理的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文件是这样的:
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都不会被渲染!
Debug mode和Production Mode的屏幕截图
你认为我在这里发生了什么?
更新的
问题在于GridPanel的Height
,因为它是在运行时根据浏览器的屏幕大小计算的。因此,当实例化组件时,尚未计算高度!愚蠢的错误:)
答案 0 :(得分:0)
我会先尝试移动system.module.grid定义,然后才能在system.module.form中使用它。
答案 1 :(得分:0)
我会建议有两个不同的版本。你的理由是什么?