从零开始学习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);