Различное поведение приложения ExtJS в режиме отладки и минимизации - PullRequest
2 голосов
/ 22 марта 2012

Я столкнулся со странным поведением в веб-приложении, над которым я сейчас работаю. Интерфейс полностью построен на 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, как это было вычислено во время выполнения, из размера экрана браузера. Следовательно, когда компонент был создан, Высота еще не была вычислена! Глупая ошибка:)

Ответы [ 2 ]

0 голосов
/ 22 марта 2012

Я бы посоветовал иметь две разные версии. Какова ваша причина для этого?

0 голосов
/ 22 марта 2012

Я бы попытался переместить определение system.module.grid до его использования в system.module.form.

...