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

我们已经给search-panel设置了cls属性：“一个可以添加到这个组件元素中的供选择的附加CSS类（默认为“”），主要可用于对组件的定制风格或者其组件元素的CSS规范化等”（引自SenchaTouch的相关文档），我们将使用这些类来达到视图的半透明化处理的目的。

SearchView将镶嵌在其他视图的顶部，并且不是以子视图窗口的方式显示，所以我们需要设置全屏属性，以强制组件尽可能的占用所有的可用空间。

因为我们想让我们的搜索视图有滑动功能，我们需要设置浮动floating属性为true，否则视图将显示没有滑动动画功能，下面就是senchaTouch文档关于此问题的描述：“以浮动属性来创建组件，并且使用绝对定位，缺省值为false”。

当浮动属性为true时，x-floating类将被附加到组件上，这个类被添加了一些我们不想要的CSS规则，像边界等，为了避免这些不需要的类的添加，对于floatingCls的属性值必须设为空。

我们已经在可泊位的工具条上添加了搜索字段和取消按钮，在这部分的flex属性的代码中（上面代码中的第12行）属性将被设为1，以使搜索字段的宽度达到尽可能的大（使取消按钮被推到靠右的地方）。

关于更多的flex属性和布局，可以参考senchaTouch屏幕的Introtolayouts。

现在打开res/css/style.css文件，并添加下面的内容：

.search-panel{

z-index:10000;

background:url(../images/search-panel-bg.png)repeat;

}

我们已经针对z-index设置足够大的值，以确保搜索视图在所有的控件之上，我们也添加了半透明的背景图片，这个图片可以从这里（here）下载，下载此图片后并将其放到res/images目录中。

现在该是我们进一步细化视图的时候了！

打开搜索控制器（SearchController.js）修改其indexaction如下：

index:()

{

if(!this.searchView)

{

this.searchView=this.render({

xtype:'SearchIndex',

});

varcancelSearchBtn=this.searchView.query('#cancelSearchBtn')[0];

//

cancelSearchBtn.setHandler((){

this.searchView.hide();

},this);

}

this.searchView.show({

type:'slide',

direction:'up',

duration:500,

});

},

首先让我们来看上面的代码第16行，因为我们向让搜索视图在其他视图的顶部，并且并不仅仅是切换过去，并不能使用其setActiveItem功能，所以我们简单的使用了视图的显示方法，这个功能函数接受可选择的动画参数，这个参数即可以使包含动画类型的字符串函数，也可以是动画属性的对象，就像我们在例子中传输的给它的一样。

在第11行代码中，我们针对隐藏在搜索视图中的取消按钮功能设置了处理器，这个隐藏功能也可以接收动画参数，因为我们不向这个函数传递一个参数，这个视图将在动画显示的功能中处于隐藏状态，反之则不然。

现在可以进行测试，搜索视图如下所示：

可以从下面的地址下载源代码（here.）