Sencha Touch（Extjs）

Sencha官方学习文档：http://docs.sencha.com/touch/2.3.1/

Sencha2.3正式版下载：http://www.sencha.com/products/touch/download/sencha-touch-2.3.0/2920

Sencha中文学习站：http://www.extjs.org.cn/

Sencha示例：http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/buttons

Sencha权威指南（现在唯一能找到的PDF）：http://58.216.22.46/cdn.baidupcs.com/file/5dd6a5970143c278022846de120a5e52?fid=487907638-250528-3497330949&time=1385084343&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-HloyVBR13U%2BUs6SIbLkribGKADk%3D&rt=sh&expires=1385085113&r=895194695&sh=1&sharesign=+YD3O+zJmF58uOiHulZscbiVxDzJJxH4a9++RThyy8icCT7szX5qWhzxxswmQru+NcAdB9PoP7r8krpCvs71gSP8njdB7dpgd2i7Hd1SBvaEmfqmZOMSFwzW1aRbbySpoe1YLseNKUQIrKTDP0mPJd4k8yMHtQu1cPL0R5Mr5x/oqxo6vb6goK1PDrMYX6b9niSFvc0jJb2P33vWkpqj9AAuQPFb4kkLVD5zYySsMOyKSzk7a1yDI16g5CmIpmg+UEe0bhO6n4WOINlolGmGTKa3DJ4fze6SSuq8iSxudjQ=&cflg=7&xcode=9100e9d40540b89c95b65dfd9e2527bb&redirect=1&wshc_tag=0&wsiphost=ipdbm

预：对Sencha的介绍网上不少，可以先了解，这里直接进入学习案例。

----------------------------------------------------------------------------------------------------------------------------------------------------

准备

将下载后的Sencha2.3压缩包，解压到任意盘。打开解压后的文件夹，先初步了解目录结构。

builds：不能编译应用程序时（如不能下载Sencha Touch的SDK工具）时，能让应用程序正常运行所使用的框架核心文件。

cmd：包含创建或发布MVC模式的应用程序时必须使用的一些文件。

docs：Sencha Touch API文档。

examples：实例。

microloader：包含创建或发布MVC模式的应用程序时必须使用的一些文件，可与cmd文件夹中的文件结合使用。

resources：资源文件夹，如css文件，images文件。

src：Sencha Touch源码。

----------------------------------------------------------------------------------------------------------------------------------------------------

示例

在任意位置新建一个目录（如：E:/stormSanCha），在目录中新建css文件夹，images文件夹。

将刚才解压出来的touch2.3.0文件夹中的：src，sencha-touch-all.js复制到该目录下，resources文件夹下的css文件夹下的sencha-touch.css复制到该目录下的css文件夹中。

到这里示例的基本条件已经满足。

第一个示例页面：

在新建的项目目录中，创建panel.html和panelTest.js

panel.html中

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>一个简单面板</title>
	<link rel="stylesheet" type="text/css" href="E:/touch-2.3.0/stormSanCha/css/sencha-touch.css"></link>
    <script type="text/javascript" src="E:/touch-2.3.0/stormSanCha/sencha-touch-debug.js"></script>
	<script type="text/javascript" src="E:/touch-2.3.0/stormSanCha/sencha-touch-all.js"></script>
	<script type="text/javascript" src="panelTest.js"></script>
	<style>
		.colorRed{
			color:red;
		}
	</style>
</head>
<body>
   
</body>
</html>

panelTest.js中

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		//创建面板方式一
		var panel = Ext.create("Ext.Panel",{
			fullscreen:true,
			id:"myPanel",
			html:"一个简单的面板"
		});
		Ext.get("myPanel").addCls("colorRed");//为组件添加样式
		//创建面板方式二
		var subPanel = new Ext.Panel({
			id:"subPanel",
			html:"面板中的子面板"
		});
		Ext.Viewport.add(panel);
		Ext.ComponentManager.get('myPanel').add(subPanel);
	}
});

效果如下：

Tab面板组件

在Sencha中使用Ext.tab.Panel来创建Tab面板，该类继承Ext.Container类，类的别名为Ext.TabPanel。可以通过Ext.TabPanel类的items配置选项来定义Tab面板中所包含的多个子组件。

在新建的项目目录中，创建tab.html和tabTest.js

tab.html中

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>面板组件使用</title>
		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/tab/tabTest.js"></script>
		<style>
body {
	font-family: "宋体";
}

.bgcolorPink {
	background-color: pingk;
}
</style>
	</head>
	<body>

	</body>
</html>

tabTest.js中

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var tabPanel = Ext.create("Ext.TabPanel",{
			id:"tabPanel",
			ui:"dark",
			tabBarPosition:"bottom",
			items:[{
				title:"主页",
				html:"主页",
				iconCls:"home"
			},{
				title:"合同",
				html:"合同",
				iconCls:"user"
			}]
		});
		Ext.Viewport.add(tabPanel);
	}
});

效果

Sencha Touch中内置图片样式效果：

图标名称	样式名称	显示效果
添加图标	add
附件	attachment
书签	bookmarks
编辑	compose
删除	delete
首页	home
定位	locate
地图	maps
排序	organize
刷新	refresh
回应	reply
搜索	search
回收站	trash
action	action
向上箭头	arrow_up
向下箭头	arrow_down
向左箭头	arrow_left
向右箭头	arrow_right
星图标	star
下载	download
收藏夹	favorites
信息	info
省略	more
设置	settings
组队	team
时间	time
用户	user

Tab面板组件

使用Ext.layout.AbstractBoxLayout类来实现盒布局，但不是直接使用，必须继承BoxLayout的两个子类。

HBoxLayout类水平布局，VBoxLayout垂直布局。

1，水平盒布局使用

在新建的项目目录中，创建box.html和boxTest.js

box.html中

<!DOCTYPE html>
<html>
	<head>
		<title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>盒子</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/box/boxTest.js"></script>
	</head>
	<body>
	</body>
</html>

boxTest.js中

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var panel = Ext.create("Ext.Panel",{
			id:"myPanel",
			layout:{
				type:"hbox",
				align:"stretch"
			},
			items:[
			{
				flex:1,
				html:"子组件1",
				style:"background-color:#5E99CC;"
			},{
				flex:2,
				html:"子组件2",
				style:"background-color:#759E60;"
			}]
		}); 
		Ext.Viewport.add(panel);
	}
});

效果：

代码中使用items配置选项定了两个子组件，使用layout定义面板使用的布局方式。

type：指定容器组件的布局方式，本文使用hbox水平布局。

align：指定容器中子组件的垂直对齐方式。默认为center，表示子组件的纵向对齐方式。可以使用pack来配置横向对齐方式。

配置选项	选项值	对齐方式
align	center	中央对齐
align	start	顶部对齐
align	end	底部对齐
align	stretch	子组件的高度自动扩展为容器高度
pack	center	中央对齐
pack	start	向左对齐
pack	end	向右对齐
pack	justify	两端对齐

代码中每一个子组件都使用了一个flex配置选项（所有继承了容器的组件都具有该配置选项）。当使用水平盒布局时，该配置用来指定每一个子组件的高度。使用整数来指定该配置的选项值，该整数表示每一子组件占宽度占容器总宽度的百分比。本文中，容器面板的宽度为浏览器宽度，第一个子组件flex配置值为1，第二个子组件flex配置值为2，所得宽度：

第一个子组件：

（flex配置选项值1/flex配置选项值的综合3）*浏览器宽度 = 浏览器宽度的1/3

第二个子组件

（flex配置选项值2/flex配置选项值的综合3）*浏览器宽度 = 浏览器宽度的2/3

在配置选项可以同事使用width和flex来配置宽度

修改items内代码：

items:[
			{
				flex:1,
				html:"子组件1",
				style:"background-color:#5E99CC;"
			},{
				flex:2,
				html:"子组件2",
				style:"background-color:#759E60;"
			},{
				width:200,
				html:"子组件3",
				style:"background-color:#5E99CC;"
			}]

第一个子组件的宽度：

（flex配置选项值1/flex配置选项值的总和3）*（浏览器总宽度-200）= （浏览器总宽度-200）*1/3

第二个子组件的宽度：

（flex配置选项值2/flex配置选项值的总和3）*（浏览器总宽度-200）= （浏览器总宽度-200）*2/3

第三个子组件的宽度：200

2.垂直盒布局使用

修改布局方式type为vbox，其余配置当是水平布局时设置宽度，当是垂直布局时设置高度。

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var panel = Ext.create("Ext.Panel",{
			id:"myPanel",
			layout:{
				type:"vbox",
				align:"stretch"
			},
			items:[
			{
				flex:1,
				html:"子组件1",
				style:"background-color:#5E99CC;"
			},{
				flex:2,
				html:"子组件2",
				style:"background-color:#759E60;"
			},{
				width:200,
				html:"子组件3",
				style:"background-color:#5E99CC;"
			}]
		}); 
		Ext.Viewport.add(panel);
	}
});

效果：

Fig布局

这里介绍2个非常重要的布局：Fit布局与Card布局，其中Fit布局通过Ext.layout.FitLayout类来实现。

当容器组件中只有一个子组件时，通过Fit布局来将子组件的尺寸自动扩展至父容器组件的尺寸，使其充满整个父容器组件内部。

在新建的项目目录中，创建fit.html和fitTest.js

首先看一个没有使用fit布局的示例

fit.html中

<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fit布局</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script>
  </head>
  
  <body>
  </body>
</html>

fitTest.js中

<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fit布局</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script>
  </head>
  
  <body>
  </body>
</html>

效果：

为了让子组件的尺寸自动扩展为父容器面板的尺寸，修改js代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fit布局</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/fit/fitTest.js"></script>
  </head>
  
  <body>
  </body>
</html>

效果：

可以看出子组件的尺寸自动扩展为父容器的尺寸。

在使用Fit布局的时候，父容器中应该只存在一个子组件，如果存在多个子组件，将只会显示一个。

例如：

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var panel = Ext.create("Ext.Panel",{
			layout:"fit",
			items:[{
				style:"background-color:pink",
				html:"示例文字1"
			},{
				style:"background-color:pink",
				html:"示例文字2"
			}]
		});
		Ext.Viewport.add(panel);
	}
});

效果：

可以看到虽然父容器中有2个子组件，但使用Fit布局时，只会显示一个子组件。

Card布局

Card布局通过Ext.layout.FitLayout类的子类Ext.layout.CardLayout类来实现。Card容器用来对容器组件的多个子组件进行管理。

Card布局使用如下：

layout："card"

与Card配合使用的一个最重要的方法是setActiveItem方法，应为浏览器始终只显示一个子组件，所以必须通过该方法来告诉浏览器显示哪一个组件，从而实现不同子组件之间的切换。setActiveItem使用如下：

panel.setActiveItem(newCard)；

panel表示父容器组件对象，newCard可以是一个代表子组件的唯一id，也可以是组件集合中的序号（第一个子组件为0），甚至可以是一个代表子组件的变量。

在新建的项目目录中，创建card.html和cardTest.js

card.html中

<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>card布局</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/card/cardTest.js"></script>
  </head>
  
  <body>
  </body>
</html>

cardTest.js中

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var panel = Ext.create("Ext.Panel",{
			layout:"card",
			items:[{
				style:"background-color:pink",
				html:"示例组件1"
			},{
				style:"background-color:pink",
				html:"示例组件2"
			}]
		});
		Ext.Viewport.add(panel);
		panel.setActiveItem(1);
	}
});

效果：

示例中有2个子组件，通过setActiveItem设置组件位置“1”，使页面显示第二个组件。

为之前的组件设置id

launch:function(){
		var panel = Ext.create("Ext.Panel",{
			layout:"card",
			items:[{
				id:"item1",
				style:"background-color:pink",
				html:"示例组件1"
			},{
				id:"item2",
				style:"background-color:pink",
				html:"示例组件2"
			}]
		});
		Ext.Viewport.add(panel);
		panel.setActiveItem("item2");
	}

setActiveItem也可以传入引用子组件的变量。使用变量p1，p2创建2个面板组件，并在容器中使用items配置项中直接使用这两个变量，将这两个面板添加到容器面板组件中，然后对容器面板组件使用setActiveItem方法，来指定显示的面板。

修改后代码：

launch:function(){
		var p1 = Ext.create("Ext.Panel",{
			id:"panel1",
			style:"background-color:pink",
			html:"示例面板1"
		});
		var p2 = Ext.create("Ext.Panel",{
			id:"panel2",
			style:"background-color:pink",
			html:"示例面板2"
		});
		var panel = Ext.create("Ext.Panel",{
			layout:"card",
			items:[p1,p2]
		});
		Ext.Viewport.add(panel);
		panel.setActiveItem(p2);
	}

在指定Card布局的时候，可以添加animation配置选项，方法如下：

var panel = Ext.create("Ext.Panel",{
			layout:"card",
			animation:{type:"slide",direction:"right",duration:"1000"},
			items:[p1,p2]
		});

animation配置的作用为设置容器中子组件在进行切换显示的时候，所实现的动画效果。

参数	效果
fade	淡入淡出
slide	滑动
flip	翻转
wipe	擦除
pop	炸出
cube	滑动

配置项中type用于设置使用哪种特效，direction用于设置在使用slide特效时两个面板的滑动方向，duration设置特效时长。

在使用setActiveItem方法切换组建时，并不具有特效，如果做了上面的配置，需要使用animateActiveItem方法来显示特效，代码如下：

var panel = Ext.create("Ext.Panel",{
			layout:"card",
			animation:{type:"slide",direction:"right",duration:"1000"},
			items:[p1,p2]
		});
		Ext.Viewport.add(panel);
		//panel.setActiveItem(p2);
		panel.animateActiveItem(p2,"slide");

animateActiveItem方法中，第一个参数用于设置显示的子组件，第二个参数可以是一个字符串，代表使用特效的名称，也可以是一个配置对象，如：

animateActiveItem(p2, {type:"slide",direction:"right",duration:"1000"});

Sencha Touche 中Tab面板组件中也可以使用Card布局，所以也可以使用animation来配置组件切换时的特效。

修改之前tabTest.js代码

launch:function(){
		var tabPanel = Ext.create("Ext.TabPanel",{
			id:"tabPanel",
			ui:"dark",
			tabBarPosition:"bottom",
			layout:{
				animation:"slide"
			},
			items:[{
				title:"首页",
				html:"主页",
				iconCls:"home"
			},{
				title:"用户",
				html:"用户",
				iconCls:"user"
			}]
		});
		Ext.Viewport.add(tabPanel);
	}

在不适用animation配置时，Tab面板组件在子容器组件进行切换显示时，默认使用slide特效。

容器内部组件的停靠

在Sencha Touche中，Default布局是一切布局的基础，其他所以布局都直接或间接的继承了该布局。但通常不应该直接使用Default布局，而是使用继承了Default布局的其他不布局。Default布局的一个重要特性就是支持“停靠”，这意味着其他所有布局都支持内部组件的停靠。

所谓“停靠”，只是容器内部、紧靠组件上边缘、下边缘、左边缘或右边缘放置一个组件，当被停靠的尺寸扩大时，组件的长度和高度也会随之扩展。

示例：

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var panel = Ext.create("Ext.Panel",{
			layout:"hbox",
			items:[
			{
				docked:"top",
				height:20,
				style:"background-color:pink;text-align:center",
				html:"顶部容器"
			},{
				id:"item1",
				flex:1,
				style:"background-color:purple;",
				html:"左边容器"
			},{
				id:"item2",
				flex:1,
				style:"background-color:green;",
				html:"右边容器"
			}]
		});
		Ext.Viewport.add(panel);
	}
});

效果：

这段代码中，使用容器组件的docked配置容器组件停靠的位置，该配置可以指定left、top、right、bottom。

Carousel组件

前面对Sencha Touch的布局进行了全面介绍，这里将介绍Sencha Touch中非常重要的容器组件Carousel组件。由于该组件必须要结合Sencha Touch中盒布局一起使用，所以放在布局内容之后介绍。

Carousel组件可以理解为使用了Card布局的容器组件，可以在Carousel中定义多个子组件，到但浏览器始终只会显示一个子容器组件。Carousel组件与其他使用了Card布局的容器不同的是，用户可以通过拖拽或单击浏览器中显示的指示来将位于浏览器之外的子容器组件移入浏览器，同时将当前浏览器显示的子容器组件移除浏览器。

在Sencha Touch中通过Ext.carousel.Carousel类来创建Carousel组件，类的别名Ext.Carousel，该类继承Ext.Container类（定义容器组件），可以直接使用Container类的各种配置项、方法和事件。

在新建的项目目录中，创建carousel.html和carouselTest.js

carouse.html中

<!DOCTYPE html>
<html>
	<head>
		<title>box.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>carousel布局</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/carousel/carouselTest.js"></script>
	</head>

	<body>
	</body>
</html>

carouselTest.js中

Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var carousel1 = Ext.create("Ext.Carousel",{
			ui:"dark",
			flex:1,
			direction:"horizontal",//横向排列
			defaults:{
				styleHtmlContent:true
			},
			items:[{
				html:"左视图",
				style:"background-color:pink"
			},{
				html:"中视图",
				style:"background-color:red"
			},{
				html:"右视图",
				style:"background-color:yellow"
			}]
		}); 
		var carousel2 = Ext.create("Ext.Carousel",{
			ui:"dark",
			flex:1,
			direction:"vertical",//纵向排列
			defaults:{
				sytleHtmlContent:true
			},
			items:[
			{
				html:"上视图",
				style:"background-color:pink"
			},{
				html:"中视图",
				style:"background-color:red"
			},{
				html:"下视图",
				style:"background-color:yellow"
			}]
		});
		var panel = Ext.create("Ext.Panel",{
			layout:{
				type:"vbox",
				align:"stretch"
			},
			items:[carousel1,carousel2]
		});
		Ext.Viewport.add(panel);
	}
});

效果：

使用了上下两个Carousel组件，两个Carousel组件中都放了3个子容器组件。页面打开时浏览器显示两个Carousel组件中的第一个子容器组件，用户可以向不同的方向拖拽或点击其中的指示器（浏览器中3个小圆点）。

Carousel中direction配置的作用是定义内部子组件的排列方向。horizontal：横向排列所有子组件、vertical：纵向排列所有子组件。

接下来详细介绍下Carousel中defaults配置的作用。

在Sencha Touch中，可以为所有容器组件使用defaults配置选项，该配置的作用是为容器组件中所有使用items来添加的子组件进行默认的配置。当然子组件中依然可以重写配置的方式来修改默认的配置。

如：

launch:function(){
	var panel = Ext.create("Ext.Panel",{
		layout:{
			type:"vbox",
			align:"stretch"
		},{
			defaultes:{
				flex:1
			},
			items:{
				html:"子组件1",
				style:"background-color:pink"
			},
			{
				html:"子组件2",
				style:"background-color:blue"
			}
		}
	});
	Ext.Viewport.add(panel);
}

代码中具有一个容器面板，该容器面板中具有上下两个子组件，虽然没有单独使用flex配置来指定子组件的高度，但通过在容器面板中使用defaultes配置，并在配置中使用flex来统一制定所有子容器的高度。

Carousel组件中最常用的方法有next、prev、setActiveItem、animateActiveItem方法。

例如：carousel1.next();浏览器中显示的是“中视图”的组件。prev与next相反，把浏览器当前显示的子容器组件切换显示成该组件的上一个子容器组件。

NavigationView组件

NavigationView组件本质上是一个具有Card布局的容器组件，所以每次只显示一个内部子组件。但是它提供一些附加特效，这使它更像“栈堆”容器组件。可以将子组件堆入该组件中，然后在按照堆入的顺序依次取出位于栈顶的子组件。同事，NavigationView组件自动实现了在子组件入栈出栈时的动画特效、自动实现NavigationView组件中后对按钮的展示功能、自动执行当用户点击后退按钮时，位于栈顶的子组件的出栈操作。

在新建的项目目录中，创建navigationView.html和navigationViewTest.js

navigationView.html

<!DOCTYPE html>
<html>
  <head>
    <title>navigationView组件</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>docked</title>

		<link rel="stylesheet" type="text/css"
			href="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/css/sencha-touch.css"></link>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/js/sencha-touch-all.js"></script>
		<script type="text/javascript"
			src="F:/javaFile/workspace1/Sancha_Touch/webroot/examples/navigationView/navigationViewTest.js"></script>
  </head>
  
  <body>
  </body>
</html>

navigationViewTest.js

Ext.require("Ext.NavigationView");
Ext.application({
	name:"MyApp",
	icon:"images/icon.png",//应用程序被添加到IOS操作系统中，主屏幕显示的图标。
	glossOnIcon:false,//是否要取消IOS操作系统中主屏幕添加的gloss效果。false：取消。
	phoneStartupScreen:"images/phone_startup.png",//IOS操作系统中，移动电话主屏幕显示的图标。
	tabletStartupScreen:"images/tablet_statrup.png",//IOS操作系统中，平板电脑主屏幕显示的图标。
	launch:function(){
		var view = Ext.create("Ext.NavigationView",{
			items:[{
				title:"标题一",
				html:"组件1"
			}]
		});
		panel = Ext.create("Ext.Panel",{
			title:"标题二",
			html:"组件2"
		});
		Ext.Viewport.add(view);
		view.push(panel);
	}
});

效果：

代码中的push方法将文字为“组件2”的面板组件堆入栈顶，该方法使用一个从参数，代表需要堆入栈顶的组件。

单击Back按钮，文字为“组件2”的面板组件被弹出栈外，页面中显示文字为“组件1”的容器组件。

可以随时在栈中堆入新的组件，例如：

launch:function(){
		var view = Ext.create("Ext.NavigationView",{
			items:[{
				title:"标题一",
				html:"组件1"
			}]
		});
		panel = Ext.create("Ext.Panel",{
			title:"标题二",
			html:"组件2"
		});
		Ext.Viewport.add(view);
		view.push(panel);
		panel = Ext.create("Ext.Panel",{
			title:"标题三",
			html:"组件3"
		});
		view.push(panel);
	}

效果：

在代码中可以使用NavigationView组件的pop方法将栈顶的组件弹出栈中，例如：

panel = Ext.create("Ext.Panel",{
			title:"标题三",
			html:"组件3"
		});
		view.push(panel);
		view.pop();

打开修改后的代码，文字为“组件3”的面板组件被弹出栈外，页面中显示为“组件2”的面板组件。

另外，可以使用NavigationView组件的reset方法，将栈中除了底部组件外的其他组件都弹出栈中，然后在浏览器中显示栈中的底部组件，页面将显示“组件1”的面板组件。

panel = Ext.create("Ext.Panel",{
			title:"标题三",
			html:"组件3"
		});
		view.push(panel);
		//view.pop();
		view.reset();
	}

配置NavigationView标题栏，默认情况下标题栏在NavigationView组件的顶部，但可以通过NavigationBar配置项来修改标题的停靠位置和样式。

var view = Ext.create("Ext.NavigationView",{
			navigationBar:{
				ui:"light",
				docked:"bottom"
			},
			items:[{
				title:"标题一",
				html:"组件1"
			}]
		});

效果：

将NavigationView组件中的useTitleForBackButtonText设置为true，可以将后退（Back）按钮的文字修改为在栈中，当前组件的后一个组件的标题文字。

Sencha Touch（Extjs）

猜你喜欢