天天看點

ExtJS 等待兩個/多個store加載完再執行操作

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&lt;</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] &amp;&amp; bchartarr[1] &amp;&amp; bchartarr[2] &amp;&amp; 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>//&lt;-- 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 &amp;= !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>