从零开始学习Sencha Touch MVC应用之九

由于我们没有设定xtype,工具条将使用按钮xtype,并且作为Ext.Button类的一个实例。

按钮的文本属性将成为按钮的标签。

使用itemId可以得到按钮对象的实例,我们可以利用这一特性在适当的时候来实现按钮的显示和隐藏,但是最重要的是这个功能可以被用作当按钮被触按和点击时附加调用方法。

UI属性定义了按钮的风格,设置其为回退功能,按钮为前向箭头。

下面这里是工具条看起来的一种形状:

 

下面我们来为外部工具条按钮添加处理器。

为按钮添加处理功能,首先需要做的是先获得其实例,然后调用按钮的setHandler方法。

因此,要打开上面的about action的Home控制器(app/controllers/HomeController.js

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

添加下面的内容:

var backBtn = this.application.viewport.query('#backBtn')[0];
 
backBtn.setHandler((){
         Ext.redirect('Home/index');
});

从一个视图窗口的实现回退按钮的实例,并且命名其query的查询功能,在这个功能上我们可以寻找类似CSS选择器的组件,因此,如果你熟悉CSS#backBtn你会有一种非常面熟的感觉。

你可能感兴趣的:(Sencha Touch)