我们已经为搜索按钮添加了两个新的属性：iconCls 和 iconMask。iconCls，是一个用来作为按钮图标进行设置css类背景图片的类（引自sencha touch文档），通过给search按钮设置属性值使按钮有一个放大镜的背景图像，为使这个特性能正常运转，我们也需要设置iconMask属性为true。
为Action设置了UI属性，可以使搜索按钮具有不风格。下面就是按钮显示：
现在我们必须为search按钮设置处理器的功能，因为这个按钮将总是做同样的事情，我们可以在应用中的分发功能中设置其处理器的功能如下：
launch: ()
{
this.viewport = new App.views.Viewport();
this.viewport.query('#searchBtn')[0].setHandler((){
Ext.ControllerManager.get('Search').index();
});
},
用Ext.ControllerManager的Get功能函数，我们可以访问到我们所注册的名字获取到控制器的实例，然后我们就可以像访问普通的功能函数一样来简单调用它。现在你来点击测试这个搜索按钮，则可以弹出下面的文字：Search index working (正在检索中)，这个提示警告信息正是我们在搜索控制启动indexaction中添加的脚本信息。
别急，现在还是不到建立和细化搜索视图的时候！
要想在搜索视图的顶部有搜索字段和取消按钮，使从底向上滑动时有一个半透明的背景以使下面的视图可视。
首先，在app/views/search文件夹中要建立SearchIndexView.js文件（其中：search文件夹需要提前建好），并把它包含到index文件中，并且添加如下的代码：
App.views.SearchIndex = Ext.extend(Ext.Panel, {
cls: 'search-panel',
fullscreen: true,
floating: true,
floatingCls: '',
dockedItems: [{
xtype: 'toolbar',
items: [
{
xtype: 'searchfield',
flex: 1,
},
{
text: 'Cancel',
itemId: 'cancelSearchBtn',
ui: 'action',
}
],
}],
});
Ext.reg('SearchIndex', App.views.SearchIndex);