隐藏和显示工具条的回退按钮
工具条的回退按钮只有在其需要的时候才显示,因此在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)条目,这个空隔条目将把按钮推到两个边缘,使按钮在工具条的两端。