extjs加載store是異步加載的,這有很多好處。但是當我們要在兩個或多個不同的store加載完再執行一些操作時,異步加載就成了一個問題。在stack
overflow 等網站搜集并試用了幾個處理方法,總結如下。
1、自己定義一個元件 (from:)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<code>ext.define(</code><code>‘ext.ux.storeloadcoordinator‘</code><code>, {</code>
<code>mixins: {</code>
<code> </code><code>observable:</code><code>‘ext.util.observable‘</code>
<code>},</code>
<code>resetstoreloadstates: function() {</code>
<code> </code><code>this</code><code>.storeloadstates = {}; </code>
<code> </code><code>ext.each(</code><code>this</code><code>.stores, function(storeid) {</code>
<code> </code><code>this</code><code>.storeloadstates[storeid] =</code><code>false</code><code>;</code>
<code> </code><code>},</code><code>this</code><code>); </code>
<code>}, </code>
<code>isloadingcomplete: function() {</code>
<code> </code><code>for</code>
<code>(</code><code>var</code>
<code>i=0; i<</code><code>this</code><code>.stores.length; i++) {</code>
<code> </code><code>var</code>
<code>key =</code><code>this</code><code>.stores[i];</code>
<code> </code><code>if</code>
<code>(</code><code>this</code><code>.storeloadstates[key]==</code><code>false</code><code>) {</code>
<code> </code><code>return</code>
<code>false</code><code>;</code>
<code> </code><code>}</code>
<code> </code><code>}</code>
<code> </code><code>return</code>
<code>true</code><code>; </code>
<code>onstoreload: function(store, records, successful, eopts, storename) {</code>
<code> </code><code>this</code><code>.storeloadstates[store.storeid] =</code><code>true</code><code>;</code>
<code> </code><code>if</code>
<code>(</code><code>this</code><code>.isloadingcomplete()==</code><code>true</code><code>) {</code>
<code> </code><code>this</code><code>.fireevent(</code><code>‘load‘</code><code>);</code>
<code> </code><code>this</code><code>.resetstoreloadstates();</code>
<code>constructor: function (config) {</code>
<code> </code><code>this</code><code>.mixins.observable.constructor.call(</code><code>this</code><code>, config);</code>
<code> </code><code>this</code><code>.resetstoreloadstates();</code>
<code>store = ext.storemanager.lookup(storeid);</code>
<code> </code><code>store.</code><code>on</code><code>(</code><code>‘load‘</code><code>, ext.bind(</code><code>this</code><code>.onstoreload,</code><code>this</code><code>, [storeid],</code><code>true</code><code>));</code>
<code> </code><code>},</code><code>this</code><code>);</code>
<code> </code><code>this</code><code>.addevents(</code>
<code> </code><code>‘load‘</code>
<code> </code><code>);</code>
<code>}});</code>
使用的時候把兩個不同的store,作為參數傳過去。
<code>var</code> <code>store1 = ext.create(</code><code>‘ext.data.store‘</code><code>, {</code>
<code> </code><code>storeid:</code><code>‘store1‘</code><code>,</code>
<code> </code><code>.... (rest of store config)</code>
<code>}}); </code>
<code>var</code> <code>store2 = ext.create(</code><code>‘ext.data.store‘</code><code>, {</code>
<code> </code><code>storeid:</code><code>‘store2‘</code><code>,</code>
<code>var</code>
<code>coordinatior = ext.create(</code><code>‘ext.ux.storeloadcoordinator‘</code><code>, {</code>
<code> </code><code>stores: [</code><code>‘store1‘</code><code>,</code><code>‘store2‘</code><code>],</code>
<code> </code><code>listeners: {</code>
<code> </code><code>load: function() {</code>
<code> </code><code>// do post-load work</code>
<code>}); </code>
2、使用setinterval (from:)
<code>var</code> <code>bchartarr =[</code><code>false</code><code>,</code><code>false</code><code>,</code><code>false</code><code>,</code><code>false</code><code>]; </code>
<code>//加載圖表軸 </code>
<code>ext.getstore(</code><code>"chartaxes"</code><code>).load( </code>
<code>{ </code>
<code> </code><code>params</code><code>:{ queryid:queryid }, </code>
<code> </code><code>callback:function(){ </code>
<code> </code><code>bchartarr[0] =</code><code>true</code><code>; </code>
<code> </code><code>} </code>
<code>}); </code>
<code>//加載圖表序列 </code>
<code>ext.getstore(</code><code>"chartseries"</code><code>).load( </code>
<code> </code><code>bchartarr[1] =</code><code>true</code><code>; </code>
<code> </code>
<code>//加載圖表樣式 </code>
<code>ext.getstore(</code><code>"chartstyle"</code><code>).load( </code>
<code> </code><code>bchartarr[2] =</code><code>true</code><code>; </code>
<code>// 按鈕 </code>
<code>ext.getstore(</code><code>"buttons"</code><code>).load( </code>
<code> </code><code>params</code><code>:{query_id:queryid}, </code>
<code> </code><code>scope:</code><code>this</code><code>, </code>
<code> </code><code>bchartarr[3] =</code><code>true</code><code>; </code>
<code>me =</code><code>this</code><code>; </code>
<code>// 等待所有的storoe加載完成後執行 </code>
<code>timer = setinterval(function(){ </code>
<code> </code><code>if</code><code>(bchartarr[0] && bchartarr[1] && bchartarr[2] && bchartarr[3]){ </code>
<code> </code><code>clearinterval(timer);</code><code>// 清除等待 </code>
<code> </code><code>// 解析圖表樣式、軸、序列動态生成圖表 </code>
<code> </code><code>me.createchartpanel(); </code>
<code>},100); </code>
3、與方法二類似 (from: )
<code>var</code> <code>store1 = ext.create(</code><code>‘ext.data.store‘</code><code>, {</code>
<code> </code><code>model: mymodel,</code>
<code> </code><code>storeid:</code><code>‘store1‘</code><code>,</code><code>//<-- adds this to ext.data.storemanager</code>
<code> </code><code>proxy: {</code>
<code> </code><code>type:</code><code>‘ajax‘</code><code>,</code>
<code> </code><code>url:</code><code>‘url...‘</code><code>,</code>
<code> </code><code>reader:</code><code>‘json‘</code>
<code> </code><code>},</code>
<code> </code><code>autoload: {</code>
<code> </code><code>callback: initdata</code>
<code>});</code>
<code>store2 = ext.create(</code><code>‘ext.data.store‘</code><code>, {</code>
<code>// initialize store dependencies when all stores are loaded</code>
<code>function initdata() {</code>
<code> </code><code>var</code>
<code>loaded;</code>
<code> </code><code>ext.data.storemanager.each( function(store) {</code>
<code> </code><code>loaded &= !store.isloading(); </code>
<code> </code><code>return</code>
<code> </code><code>});</code>
<code> </code><code>if</code><code>(loaded) {</code>
<code> </code><code>// do stuff with the data</code>
<code>}</code>