从零开始学习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属性，然后自己做一下测试，以便更好的理解它。