Экранная панель нагрузки Extjs не работает на хроме

Question

У меня есть панель и нажимаю на кнопку Я звоню Ajax. на firefox я мог видеть маску на панели, но на хром она не работает. Даже я создаю отдельный объект маски перед вызовом Ajax, но он отображается только после завершения вызова Ajax. Я мог показать/скрыть маску с помощью javascript-консоли браузера, но почему-то не работает, когда вызов Ajax, выполняющий мой вызов Ajax, синхронизируется. и проблема только с хромом.

jsfiddle.net/naveen_ramawat/6d7pyohL/2/

Answer 1

Используйте маску для всего тела

Ext.getBody().mask('your message'); 

до того АЯКС вызова и использования,

Ext.getBody().unmask(); 

внутри АЯКС успеха

Обновлено jsfiddle- http://jsfiddle.net/yq8e7na8/3/

(установить тайм-аут перед asynchronos АЯКС вызова)

Answer 2

Попробуйте этот код вместо:

panel = Ext.getCmp('panel'); 
var myMask = new Ext.LoadMask(panel , {msg:"Loading..."}); 
myMask.show(); 

Тогда можно скрыть в функции успех обратного вызова:

myMask.hide(); 

Answer 3

Это вещь:

мой звонок Ajax является синхронизацией. и проблема с хромом только

синхронизации AJAX устарела и Chrome на самом деле does not process it anymore, показывая это предупреждение в консоли:

Синхронный XMLHttpRequest в основном потоке является устаревшим из-за свои пагубные последствия до конца опыт пользователя. Для получения дополнительной информации, check http://xhr.spec.whatwg.org/.

Использование async AJAX.

ОБНОВЛЕНИЕ:

Хром фактически, кажется, обработать запрос синхронизации AJAX, однако, показывает маску нагрузки падает до конца. Похоже, в отличие от Firefox, Chrome не дождался, пока интерфейс действительно отобразит маску, прежде чем переходить на следующий бит кода JavaScript. И поскольку следующий бит - это вызов AJAX с синхронизацией, который является , замораживает все, за которым следует myMask.hide() - мы никогда не видим маску.

Чтобы увидеть маску в Chrome, вы можете поместить небольшую задержку (1 миллисекунду было достаточно на моей машине) после того, как myMask.show();:

handler(){ 
       var myMask = new Ext.LoadMask(mypanel , {msg:"Loading..."}); 
       myMask.show(); 
       setTimeout(function(){ 
        Ext.Ajax.request({ 
         url: '/echo/js/?delay=5&js=', 
         method: 'GET',   
         async: false 
        }); 
        console.log('hiding mask'); 
        myMask.hide();    
       }, 1); 
      } 

Во время задержки маска оказывается перед браузер зависает делает синхронизацию AJAX вызов. Рабочая скрипку: http://jsfiddle.net/6d7pyohL/4/

Answer 4

var myMask = new Ext.LoadMask(Ext.getBody(),{msg:"please wait..."}); 
$(document).ajaxStart(function(){ 
    myMask.show(); 
}); 
$(document).ajaxComplete(function(){ 
    myMask.hide(); 
}); 

jQuery.ajax({ 
    url:"abc.php", 
    async:true, 
    type:"POST", 
    success:function(data){ 

    } 
}); 

вместо асинхронной: ложь, используйте асинхр: истинный