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

隐藏和显示工具条的回退按钮

工具条的回退按钮只有在其需要的时候才显示,因此在index view视图中应当是隐藏的。

在上面的index action中:

this.application.viewport.setActiveItem(this.indexView, options.animation);

添加:

var backBtn = this.application.viewport.query('#backBtn')[0];
backBtn.hide();

在about action仅有如下代码:

var backBtn = this.application.viewport.query('#backBtn')[0];

添加如下:

backBtn.show();

如果你现在进行测试,回退按钮仅在abuot view视图中可见。

直接调用action控制器

下面我们在应用中添加搜索功能,因此我们需要创建一个新的控制器。

在控制器的文件夹controllers创建一个命名SearchController.js文件,并且在index文件中包含它,并且在其中添加下面的内容:

Ext.regController('Search', {
 
         // index action
         index: ()
         {
                 alert('Search index working');
         },
});

我们将通过点击那些在工具条上呈现显示的按钮来进行触发控制器,因此需要向视图工具条上增加相应的按钮:

items: [
    {
         text: 'Back',
         itemId: 'backBtn',
         ui: 'back',
    },
    {xtype: 'spacer'},
    {
         itemId: 'searchBtn',
         iconCls: 'search',
         iconMask: true,
         ui: 'action',
    },
],

在我们的工具条按钮之间,我们添加一个xtype spacer 空隔(Ext.Spacer)条目,这个空隔条目将把按钮推到两个边缘,使按钮在工具条的两端。

posted @ 2011-12-15 10:35  暗痛  阅读(370)  评论(0编辑  收藏  举报