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

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

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

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

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

关于更多的flex属性和布局，可以参考sencha Touch屏幕的Intro to layouts。

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

.search-panel {         z-index: 10000;         background: url(../images/search-panel-bg.png) repeat;}

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

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

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

index: (){         if ( ! this.searchView)         {                 this.searchView = this.render({                          xtype: 'SearchIndex',                 });                  var cancelSearchBtn = this.searchView.query('#cancelSearchBtn')[0];                 //                 cancelSearchBtn.setHandler((){                          this.searchView.hide();                 }, this);         }          this.searchView.show({                 type: 'slide',                 direction: 'up',                 duration: 500,         });},

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

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

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

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