從零開始學習Sencha Touch MVC應用之十

查詢功能執行Ext.ComponentQuery.query，並且返回一個組件隊列，因此，有且僅有一個組件條目化ID為BackBtn，返回陣列的第一項就是工具條按鈕。

如果需要尋找更多的關於組件查詢資料，你可以到這裡（ here ）來閱讀和查zho，看看Sencha Touch文檔是如何來解釋的。

  既然我們已經得到了按鈕的執行個體，我們就可以附加一個處理器，當按鈕被觸按/點擊時來觸發。我們實現這個通過傳遞一個功能到setHandler按鈕的方法，在這個功能中，我們用Ext.redirect回到index action通過傳遞其路由。

Ext.redirect是Ext.Dispatcher.redirect的簡寫，並且，像sencha touch文檔所描述的一樣：“分配一個請求到控制器的action中，增加所需的曆史堆棧並且添加和更新頁面的url”。

現在可以測試這個按鈕了，從index到about，點擊回退按鈕，你的頁面將被重新導向到index頁面。注意滑動動畫的動作是從右向左而且自然的處理另一個方式，我們將在下面搞定這個問題。

 

當調用控制器action使用Ext.dispatch功能傳遞最佳化參數

你已經知道前面的步驟，我們用到滑動功能，回到index action中。

Index action顯示其視圖如下：

this.application.viewport.setActiveItem(this.indexView);

setActionItem功能接到一個次級的參數“cardSwitchAnimation通常是在Cards之間切換，這個可以使一個字元傳的類型的動畫也可以是配置參數類型的動畫（引自Sencha Touch 文檔）。

 

因此，我們可以確定index視圖如何運動的當用第二個參數進行顯示的，但我們從About Action重新導向到此頁面唯一可以做的事情就是如此了，我們如何完成此任務？好，我們通過使用Ext.dispatch功能達到此目的。

Ext.dispatch是Ext.Dispatcher.dispatch的簡化，被Ext.Dispatcher.redirect (Ext.redirect).等內部調用和使用的功能，因為我們可以通過向action功能傳遞參數的方式當我們在調用它時使用這這個功能。

到這個action中並且進行如下的替換：

在這個函數中

backBtn.setHandler((){

         Ext.redirect('Home/index');

});

用

backBtn.setHandler(()

{

         Ext.dispatch({

                 controller: 'Home',

                 action: 'index',

                 historyUrl: 'Home/index',

         });

});

替掉。

這個分發dispatch功能接受當唯一的參數對象至少帶有控制器和分發action進行分發作為其屬性來進行操作的。

這個historyUrl 屬性是一個被添加了ＵＲＬ的路由(index.html#Home/index).

當我們使用Ext.dispatch做上面的事情時，我們同樣可以用Ext.redirect(‘Home/index’).來完成他們。

如果historyUrl屬性沒有被添加到分發功能傳遞對象到這裡，什麼事情將發生呢：當你在about action 中，將有index.html#Home/about在ＵＲＬ，當你點擊back回退按鈕你將重新定向到index action上，但ｕｒｌ將仍然會有#Home/about在其中，當你試圖在index v點擊about連結，將沒有任何事情發生，因為Ａｐｐ程式認為當前的頁面已經在ａｂｏｕｔ　ａｃｔｉｏｎ中了，你應當注釋掉historyUrl屬性，然後自己做一下測試，以便更好的理解它。