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

我们已经为搜索按钮添加了两个新的属性：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);