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

我们已经给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.）

转载于:https://www.cnblogs.com/fyq891014/archive/2012/05/08/4188894.html

从零开始学习Sencha Touch MVC应用之十四相关推荐

从零开始学习Sencha Touch MVC应用之十九
列表组件要求两个前提条件被定义:用来进行数据存储的存储器和itemTpl 负责来显示数据..要求列表来显示针对每条新闻的标题和日期,因此我们把我们在所定义的新闻模型的属性名称放在花括号中括起来.. 下 ...
从零开始学习Sencha Touch MVC应用之七
在此我们将要继续构建我们的Sencha Touch MVC app应用工程,这次我们将探索控制器action的不同调用方式. 控制器action的调用方式将按下面三种方式: l 利用路 ...
从零开始学习Sencha Touch MVC应用之八
用HTML 连接来调用控制器的anction 首先,我们将用HTML 连接来调用控制器的anction,因此,要修改HomeIndex 视图的html属性如下: html: '<a href=& ...
从零开始学习Sencha Touch MVC应用之六
在目前实现的应用中,你将看到上图所示的效果,我们已经添加了一些html标签在内容中,但效果看起来还是普通的文本文字效果,为了达到预期的目标我需要设置视图的styleHtmlContent属性为true ...
《从零开始学习ASP.NET MVC 1.0》-开天辟地入门篇
<从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...
从零开始学习ASP.NET MVC 入门
<从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...
从零开始学习ASP.NET MVC 1.0 (一)
从零开始学习ASP.NET MVC 1.0 (一) MVC1.0下载地址:http://www.microsoft.com/download/en/details.aspx?id=5388 博客园:h ...
R语言学习笔记——高级篇：第十四章-主成分分析和因子分析
R语言 R语言学习笔记--高级篇:第十四章-主成分分析和因子分析文章目录 R语言前言一.R中的主成分和因子分析二.主成分分析 2.1.判断主成分的个数 2.2.提取主成分 2.3.主成分旋转 ...
从零开始学习 ASP.NET MVC 1.0 (三) Controller/Action 深入解析与应用实例【转】
一.摘要一个Url请求经过了Routing处理后会调用Controller的Action方法. 中间的过程是怎样的? Action方法中返回ActionResult对象后,如何到达View的? 本文 ...

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

从零开始学习Sencha Touch MVC应用之十四相关推荐

最新文章

热门文章