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