从零开始学习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 属性是一个被添加了URL的路由(index.html#Home/index).
当我们使用Ext.dispatch做上面的事情时,我们同样可以用Ext.redirect(‘Home/index’).来完成他们。
如果historyUrl属性没有被添加到分发功能传递对象到这里,什么事情将发生呢:当你在about action 中,将有index.html#Home/about在URL,当你点击back回退按钮你将重新定向到index action上,但url将仍然会有#Home/about在其中,当你试图在index v点击about链接,将没有任何事情发生,因为App程序认为当前的页面已经在auto action中了,你应当注释掉historyUrl属性,然后自己做一下测试,以便更好的理解它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值