Настройка ExtJS 4 Загрузка маски для окна просмотра

Я пытаюсь настроить маску загрузки для моего окна просмотра, потому что для ее загрузки требуется много времени. Я попытался это:Настройка ExtJS 4 Загрузка маски для окна просмотра

Ext.define('MY.view.Viewport', { 
    extend: 'Ext.Viewport', 
    alias: 'widget.dispviewport', 

    initComponent: function() { 
     var me = this; 
     var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
//  myMask.show(); 
     Ext.apply(me, { 
      id : 'main-viewport', 
      listeners: { 
       beforerender: function() { 
        myMask.show(); 
       }, 
       afterrender: function() { 
        myMask.destroy(); 
       } 
      }, 
      renderTo: 'id-sym-container', 
      layout: {...

но мне кажется, что я никогда не попасть в beforerender. Я пробовал с console.log в функции beforerender, и он также не отображается. Когда я пробую себя так:

Ext.define('MY.view.Viewport', { 
    extend: 'Ext.Viewport', 
    alias: 'widget.dispviewport', 

    initComponent: function() { 
     var me = this; 
     var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
     myMask.show(); 
     Ext.apply(me, { 
      id : 'main-viewport', 
      listeners: { 
//    beforerender: function() { 
//     myMask.show(); 
//    }, 
       afterrender: function() { 
        myMask.destroy(); 
       } 
      },

это работает, но моя маска показывается слишком поздно. Использую ли я beforerender неправильный путь и как начать myMask, когда мой Viewport начинает рендеринг?

Благодаря

Leron

источник

2012-05-15 Leron

Почему он слишком долго загружает порт просмотра? Вы объединили и минимизировали все файлы JS с помощью Sencha SDK? – sha

Ситуация - есть 4-8 человек, которые работали над этим проектом передо мной, и главная проблема заключается в том, что ExtJS для меня совершенно новый, поэтому требуется много времени, чтобы понять различные функции и когда я получу новую задачу я просто иду прямо. На ваш вопрос - я не знаю, было ли это сделано, но поскольку он находится в состоянии производства, я думаю, что ничто не минимизировано. Но я думаю, что должен быть способ запустить маску загрузки в самом начале, функция «beforerender» показалась идеальным решением, но она просто не работает, поэтому ... все еще ищут ... – Leron

Я не хочу перетащить вас, но я действительно думаю, что вы пытаетесь решить неправильную проблему. Проверьте сетевой трафик - сколько JS-файлов загружает ваше приложение? Обычно в рабочей среде вы должны загружать один большой файл для ExtJs и один большой файл для вашего приложения (изображения и css, конечно, не включены). Это имеет огромное значение с неминифицированным приложением. В моем случае - регулярно мое приложение загружается около 40 секунд, после минирования - ~ 5 – sha

Ваш код не устанавливает загрузочное маску для viewport, но для body

Ergo, что вы можете сделать это, то бит кода, который делает .. .

Ext.create('MY.view.Viewport');

должен выглядеть ..

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
viewport = Ext.create('MY.view.Viewport'); 
viewport.on('afterrender',function(){myMask.destroy();},this);

Ребята в комментариях правы, хотя: P

источник

2012-05-18 13:13:41 Alex

Мне нужно было вызвать 'myMask.show()' для маски загрузки, чтобы показать его, но создать его недостаточно. – stambikk

В ExtJS 4, вы можете объявить loadmask в окне просмотра:

Ext.define('Tps.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.viewport', 

    initComponent: function() { 
     Ext.apply(this, { 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'loadmask', 
        id: 'load-indicator', 
        indicator: true, 
        hidden: true, 
        target: this 
       } 
      ] 
     }); 
     this.callParent(); 
    } 
});

Обратите внимание на целевой конфигурации является само окно просмотра. Чтобы показать/скрыть маску нагрузки, сделать вызов

Ext.getCmp('load-indicator').show(); 
Ext.getCmp('load-indicator').hide();

Показать маску нагрузки в случае визуализации для видового экрана или установить скрытый конфиг ложь.

источник

2013-08-30 15:20:12 HandyManDan

Настройка ExtJS 4 Загрузка маски для окна просмотра

ответ

Смежные вопросы