2017-01-16 6 views
1

У меня есть форма с несколькими списками в окне.Подождите, пока запрос ajax не будет заполнен

Если я сразу же открою окно и закрою его (с помощью метода закрытия кнопки), иногда у меня плохое соединение с сервером, и запрос на загрузку данных в comboboxes прерван.

Ответ «Не удалось загрузить данные ответа».

Иногда такое же случается, когда поле со списком расширяется и хранилище еще не загружено.

Для этих случаев в моем файле Application.js у меня есть следующая функция, которая отображает сообщение об ошибке.

Ext.util.Observable.observe(Ext.data.Connection, { 
requestexception: function (connection, response, options) { 
     Ext.Ajax.abort(store.operation.request); 
     Ext.Msg.show({ 
      title: 'Error!', 
      msg: 'Message...', 
      icon: Ext.Msg.ERROR, 
      buttons: Ext.Msg.OK 
     }); 
    } 
    } 
}); 

Я пытаюсь предотвратить закрытие окна, пока запросы не были завершены, и данные были загружены в comboboxs.

Я не хочу использовать setTimeout().

Возможно использование маски в окне и разблокировка при завершении запроса ou disabled/enable the close button.

Я высоко оценил предложения по поиску решения этого вопроса.

EDITED:

Другой возможность, наверное, проще, чтобы перебрать все комбобокс формы, и если проверить, в каждом из выпадающего списка, в store.isLoading(): Если да, то он отображает сообщение дождаться завершения загрузки.

EDITED

Если форма имеет только один выпадающую следующий обработчик кажется, чтобы решить эту проблему: она создает начальную маску и разоблачает его после загрузки магазина:

handler: function (btn) { 
    var win = Ext.widget('winSearch', { 
    animateTarget: this 
    }).showBy(this, 'bl'); 

    win.getEl().mask('Loading...');  

    var store = Ext.getStore('storeCombo1Id');  

    if(store.isLoading()){ 
    store.on('load', function() { 
     win.getEl().unmask(); 
    }); 
    }else{ 
    win.getEl().unmask(); 
} 
} 

Проблемы состоит в том, чтобы выполнить итерацию по нескольким спискам: я пробовал следующий код без успеха (магазины находятся в режиме просмотра):

handler: function (btn) { 
    var win = Ext.widget('winSearch', { 
     animateTarget: this 
    }).showBy(this, 'bl'); 

    win.getEl().mask('Loading...'); 


    // var store1 = Ext.getStore('storeCombo1Id'); 
    // var store2 = Ext.getStore('storeCombo2Id'); 
    // var store3 = Ext.getStore('storeCombo3Id'); 
    // var allComboboxStores = [store1, store2, store3]; 

    var allComboboxStores = ['storeCombo1Id', 'storeCombo2Id', 'storeCombo3Id']; 

    Ext.each(allComboboxStores, function(storeId) { 
     var store = Ext.getStore(storeId); 

     console.log(store); //console show 3 stores 

     if(store.isLoading()){ 
     store.on('load', function() { 
      win.getEl().unmask(); 
     }); 
     }else{ 
     win.getEl().unmask(); 
     } 
    });  
} 

Проблема с этим решением заключается в том, что если хранилище одной из выпадающих списков загружено, он запускает метод unmask независимо от других выпадающих списков, которые еще нужно загрузить.

Как дождаться загрузки всех магазинов?

EDITED

Я пробовал различные типы итераций и петель и следующее решение, кажется, работает.

handler: function() { 
var win = Ext.widget('mywindow', { 
    animateTarget: this 
}).showBy(this, 'bl'); 

win.getEl().mask('Loading...'); 

var allComboboxStores = ['storeCombo1Id', 'storeCombo2Id', 'storeCombo3Id']; 

var indexStores = 0; 
Ext.each(allComboboxStores, function(storeId) { 
    var store = Ext.getStore(storeId); 
    if(store){ 
     if(store.isLoading()){ 
      indexStores++ 
      store.on('load', function() { 
       indexStores--; 
       if (indexStores == 0){ 
        win.getEl().unmask(); 
       } 
      }); 
     } 
     else if(!store.isLoading() && indexStores == 0){ 
      win.getEl().unmask(); 
     } 
    } 
}); 
} 

Я высоко оценил предложения по улучшению этого решения или предложения в противном случае.

+1

Почему вы не используете запрос ajax с асинхронным: false. – Tejas

+2

Попытайтесь иметь числовую переменную в верхнем уровне «noStoresLoading», которая будет увеличиваться («noStoresLoading ++») каждый раз, когда хранилище загружает данные, и оно будет опущено каждый раз при загрузке или ошибке хранилища («noStoresLoading-- ") В любой момент времени« noStoresLoading »== 0, вы знаете, что загрузка магазина отсутствует –

+0

@ Tejas1991. Спасибо за предложение (очень интересно). Я протестировал его в своем приложении, и это не решило проблему, потому что окно может быть закрыто, когда запрос выполняется (медленно), что вызывает «ошибку»: не удалось получить данные ответа – josei

ответ

0

Если jQuery не является проблемой ...Я предлагаю использовать Promises

Описание: Возвращает объект Promise для наблюдения, когда все действия определенного типа, связанного со сбором, в очереди или нет, закончили.

+0

Спасибо, Адди за сугестон. В этом приложении я должен использовать extjs или чистый javascript – josei

+1

У Extjs есть обещания тоже ... Попробуйте ссылку здесь: https://www.sencha.com/blog/asynchronous-javascript-promises/ –

+1

@ Addy Only ExtJS 6, а не 5, насколько я могу судить. – Alexander

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