Cách đợi cho đến khi tất cả các cửa hàng được nạp trong ExtJs?

Question

Tôi có một bộ hộp tổ hợp được điều khiển bởi năm cửa hàng và tôi muốn kích hoạt chức năng khi tất cả các cửa hàng được tải hoàn toàn. Cách được khuyến nghị để làm điều này là gì? Tôi có thể làm một cái gì đó như thế này nhưng nó cảm thấy kludgy:

var store1Loaded = false; 
var store2Loaded = false; 

store1.on('load', function(){ 
    store1Loaded = true; 
}); 

store2.on('load', function(){ 
    store1Loaded = true; 
}); 


store1.load(); 
store2.load(); 

function WaitForFunction() 
{ 
    if (!store1Loaded || !store2Loaded)) { 
     setTimeout(WaitForFunction, 100); 
     return; 
    } 
    AllStoresLoaded(); 
} 

function AllStoresLoaded(){ 
     //Do Something 
} 

Answer 1

Sử dụng phương pháp store.isLoading(), tôi nghĩ đó là ý nghĩa của nó. Tôi sử dụng nó và nó hoạt động tốt.

1. Cấu hình các cửa hàng mà bạn muốn được nạp trước khi thực hiện một số logic với một cấu hình storeId.

2. Đặt các mã này storeIds vào một mảng.

3. Bất cứ khi nào một trong các cửa hàng này được tải lặp qua mảng, tra cứu cửa hàng với Ext.getStore và gọi isLoading trên đó.

4. Nếu không có cửa hàng nào trong mảng vẫn đang tải, hãy thực hiện logic của bạn.

Ví dụ, nói rằng tôi muốn store1 và store2 nạp trước khi tôi thực hiện một số logic (Tôi thấy điều này trong mô hình phi MVC vì nó trông giống như bạn đang không sử dụng mô hình MVC từ đoạn mã của bạn).

var store1 = Ext.create('Ext.data.Store', { 
    model: myModel, 
    storeId: 'store1', // store needs to be done MVC style or have this config 
    proxy: { 
     type: 'ajax', 
     url: 'url...', 
     reader: 'json' 
    }, 
    autoLoad: { 
     callback: initData // do this function when it loads 
    } 
}); 

var store2 = Ext.create('Ext.data.Store', { 
    model: myModel, 
    storeId: 'store2', 
    proxy: { 
     type: 'ajax', 
     url: 'url...', 
     reader: 'json' 
    }, 
    autoLoad: { 
     callback: initData // do this function when it loads 
    } 
}); 

// the stores to be checked 
var myComboStores = ['store1', 'store2'] 

// function does logic if they are both finished loading 
function initData() { 
    var loaded = true; 
    Ext.each(myComboStores, function(storeId) { 
     var store = Ext.getStore(storeId); 
     if (store.isLoading()) { 
      loaded = false; 
     } 
    }); 
    if(loaded) { 
     // do stuff with the data 
    } 
} 

Answer 2

Mở rộng các cửa hàng - thêm thuộc tính 'nạp' vào lớp trẻ, override 'initComponent()' và đính kèm để 'tải' sự kiện bên trong nó, nâng cao giá trị 'được nạp' vào đúng bên trong trình xử lý sự kiện, thêm giá trị trả về 'isLoaded()' của thuộc tính 'đã tải'.

cách khác, nếu bạn sử dụng phương tiện giao thông http - store.proxy.conn.isLoading()

Hãy xem this

Answer 3

function storeLoadingHandler(justLoadedStore) { 
    // I use some quick hacky flag, you can do it by your own way 
    justLoadedStore.loaded = true; 

    var allStoresLoaded = true; 

    // just walk through all stores registered in the application 
    // do not forget to use MVC-style stores or add 'storeId' manually 
    // or register every store with your custom code 
    Ext.StoreManager.each(function(existingStore) { 
     // we have to ignore system stores 
     if (existingStore.storeId != 'ext-empty-store') { 
      if (!existingStore.loaded) { // our flag or undefined 
       // nope, at least one of stores is not loaded 
       allStoresLoaded = false; 

       return false 
      } 
     } 
    }) 

    if (allStoresLoaded) // then do something 
     alert('All stores are loaded.'); 
} 

// add the loading handler for all stores 
Ext.StoreManager.each(function() { 
    this.on('load', storeLoadingHandler); 
}) 

Answer 4

Sử dụng timeout không phải là một giải pháp tuyệt vời, tuy nhiên cũng phải dựa vào mọi thứ trong trình quản lý cửa hàng cũng không tốt lắm.

Tôi muốn làm điều gì đó như:

var allStores = [store1, store2], 
    len = allStores.length, 
    loadedStores = 0, 
    i = 0; 

for (; i < len; ++i) { 
    allStores[i].on('load', check, null, {single: true}); 
} 

function check() { 
    if (++loadedStores === len) { 
     AllStoresLoaded(); 
    } 
} 

function AllStoresLoaded() { 
    //Do Something 
} 

Nếu bạn đang sử dụng nó rất nhiều Em thậm chí có thể biến nó thành một lớp.

Answer 5

Nếu bạn gặp rắc rối vì các combobox không được hiển thị/làm mới đúng khi các cửa hàng mất quá lâu để tải, giải pháp là tạo ra tất cả các cửa hàng mà là để được sử dụng trong một combobox như

này

Ext.create("Ext.data.Store", { 
    ..., 
    loading: true, 
    ... 
}); 

Hộp tổ hợp kiểm tra thông số đó trong cửa hàng mà họ sử dụng để làm mới thông tin sau khi được tải, nhưng đôi khi combobox được tạo và làm mới ngay cả trước khi cửa hàng bắt đầu tải và cờ 'tải' được đặt thành true và sau đó sẽ không làm mới giá trị của nó khi cửa hàng kết thúc tải. Đặt nó thành đúng để khắc phục sự cố một cách rõ ràng. Tôi không biết nếu đó là trường hợp của bạn, nhưng tôi nghĩ rằng tôi sẽ đề cập đến nó trong trường hợp nó được.

Answer 6

Sử dụng khéo léo JS

khéo léo JS là một addon tiêm qua dependancy tiêm. Nó cho phép người dùng thêm lời hứa trong các cuộc gọi AJAX và lời hứa được giải quyết chỉ khi cuộc gọi được thực hiện. Link for Deft JS. Sử dụng Ext.defer.All(); để tải tất cả 5 cửa hàng của bạn và một hàm gọi lại cụ thể sẽ được gọi khi tất cả các cửa hàng được tải. Trong hàm đó, Thực hiện logic của bạn.

Answer 7

Cửa hàng ExtJs có phương pháp load và phương thức tải có chức năng gọi lại.

Tôi đã tạo bản trình diễn. bạn có thể kiểm tra tại đây Sencha fiddle

Chức năng này sẽ tạo cửa hàng và trả lại.

function createStore(id) { 
    return Ext.create('Ext.data.Store', { 
     storeId: 'store_' + id, 
     alias: 'store.store_' + id, 
     proxy: { 
      type: 'ajax', 
      url: 'data.json', 
      timeout: 300000, 
      reader: { 
       type: 'json', 
       rootProperty: 'data' 
      } 
     } 
    }); 
} 

Ví dụ tôi có hàng loạt các cửa hàng. Nó chứa storeId hoặc bí danh.

var storeArry = [], 
    store = ''; 

for (var key = 0; key < 5; key++) { 
    storeArry.push(createStore(key).storeId); 
} 

Trên mỗi cửa hàng gọi lại chúng ta có thể xoá dữ liệu từ storeArray hoặc duy trì một biến để kiểm tra.

Ext.getBody().mask('Please wait..'); 
Ext.defer(function() { 
    Ext.getBody().unmask(); 
    Ext.Array.forEach(storeArry, function (storeId) { 
     //For checking store is created or not 
     //if store is not created we can create dyanamically using passing storeId/alias 
     store = Ext.getStore(storeId); 
     if (Ext.isDefined(store) == false) { 
      store = Ext.create(storeId); 
     } 
     store.load({ 
      callback: function() { 
       //On every store call back we can remove data from storeArray or maintain a veribale for checking. 
       Ext.Array.remove(storeArry, this.storeId); 
       if (storeArry.length == 0) { 
        Ext.Msg.alert('Success', 'All stored is loaded..!'); 
       } 
      } 
     }); 
    }); 
}, 3000);