Я столкнулся со странным поведением в веб-приложении, над которым я сейчас работаю. Интерфейс полностью построен на ExtJs 4. Приложение имеет два режима: отладка и производство.
В режиме отладки, когда пользователь щелкает пункт меню, я загружаю синхронно зависимый файл 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',
...
});
В режиме отладки все работает как положено. Но в производственном режиме я загружаю целые модули в виде единого сгенерированного минимизированного обфусцированного файла javascript (modules.js) при запуске (то есть до визуализации ViewPort) вместо загрузки зависимых модулей после события щелчка меню.
В производственном режиме все элементы, для которых создается экземпляр «xtype» (Company.view.system.module.Grid в приведенном выше примере), вообще не отображаются!
Снимки экрана Режим отладки и Режим производства .
Как вы думаете, что здесь происходит, что мне не хватает?
Обновление:
Проблема заключается в Height
GridPanel, как это было вычислено во время выполнения, из размера экрана браузера. Следовательно, когда компонент был создан, Высота еще не была вычислена! Глупая ошибка:)