LearningExtJS_new 之 effect 的应用学习(八) -

refurbish

浏览: 27837 次
性别:
来自: 福州

最近访客更多访客>>

tianyoufeizhu

fhj18302

火狐1234

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (27)

社区版块

存档分类

LearningExtJS_new 之 effect 的应用学习(八)

EXT json 框架 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Effect Test</title>
<link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="./effectTest.js"></script>
</head>
<body>
	<br/>
	<div id="target" style="background:#00ff00;width:200px;height:300px;overflow-y: hidden;">This is the target here!!!</div>
	
	<input type="text" ext:qtitle="information" ext:qtip="this is input field" ext:qwdith="100px">
</body>
</html>

//一.淡入淡出效果 fading.
//1.element的fadeOut进行淡出,fadeIn方法谈入
//2.option选项中的endOpacity理论上可以展示最后的透明度.1是全部展示.
//二.框架效果,framing effect
//1.element的frame(arg1,arg2)进行展示,可以增加参数arge1表示颜色,arg2表示展示次数
//三.移动效果 ghost effect
//1.element的ghost效果,使用参数anchoring参数,默认值为bl.
//四.高亮显示 highlight effect
//1.element的effect效果,使用参数color.默认为黄色
//第二个参数是个json对象,可以配置attr 子元素的样式,endColor等属性
//五.消失,puff effect
//1.element的puff效果,使用其它一些配置选项如easing,duration...
//六.收缩效果 scaling effect
//1.参数,宽跟高.
//七.滑动消失或显示效果 sliding effect
//1.slideIn,slideOut.使用参数anchoring参数
//八.关闭效果 switchOff effect 渐渐关闭消失
//九.渐渐收缩移动 shift efffect
//1.必须加参数,否则没有效果,参数为 x,y,width,height
//十.配置参数
//@duration 多长时间完成动作.默认时间为s(秒).
//@remove 动作操作后,在dom中移除元素
//@useDisplay 是否展现
//@afterCls 动画后应用的类名
//@afterStyle 动作后应用的样式名
//@callback 动画后的回调方法
//@easing 作用效果,说明动作开始与结束之间应用的效果 如用easeBoth,easeNone,easeIn,easeOut,easeInStrong
//@stopFx && @concurrent 停止和并行
//十一.多重效果 mutiple effect
//1.chaining  链式效果 queuing 队列效果 concurrency 并行效果
//2.stopFx 阻止队列中动作
//十二.使用组件
//1.loadMask.
//	1>定义loadMask,使用show来显示,hide来隐藏
//  2>直接取元素 loadMask(msg,cls).
//	3>对于store,加载时可以用参数来实例化loadMask类
//2.quickTips && toolTip
//	1>必须先初始化 Ext.QuickTips.init();在input或其它元素中增加qtitle,qtip,qwidth等参数值配置
//	2>使用toolTip时,配置参数target,html,showDelay,title等

var effectObj = {
	init : function(){
//		 this._testFading();
//		 this._testFraming();
//		 this._testGhost();
//		 this._testHighlight();
//		 this._testPuff();
//		 this._testScale();
//		 this._testSlide();
//		 this._testSwitchOff();
//		 this._testShift();
//		 this._testMutipleEffect();
//		this._testCustomerAnimate();
		Ext.QuickTips.init();
		this._testMask();
		
		new Ext.ToolTip({target:"target",html:"<b>this is Target!!!</b>",showDelay:1000,hideDelay:2000,title:"title"});
	},
	_testFading : function() {
		//淡入淡出
		//消失
		Ext.get("target").fadeOut({endOpacity:0.25});
		//3秒后显示
		window.setTimeout(function() {
					Ext.get("target").fadeIn({endOpacity:0.75});
				}, 3000);
	},
	_testFraming : function(){
		//框架效果
		//直接展示
		Ext.get("target").frame("ff00ff",3);
	},
	_testGhost : function(){
		//移动效果
		Ext.get("target").ghost("tr");
	},
	_testHighlight : function(){
		Ext.get("target").highlight("ffffff",{attr:"color",endColor:"00ff00"});
	},
	_testPuff : function(){
		Ext.get("target").puff({
					easing : 'easeOut',
					duration : .5,
					remove : false,
					useDisplay : false
				});
	},
	_testScale : function(){
		Ext.get("target").scale(50,100,{easing:'none'});
	},
	_testSlide : function(){
		Ext.get("target").slideOut();
		window.setTimeout(function() {
					Ext.get("target").slideIn("tr");
				}, 3000);
	},
	_testSwitchOff : function(){
		Ext.get("target").switchOff();
	},
	_testShift : function(){
		Ext.get("target").shift({
					x : 0,
					y : 0,
					width : 100,
					height : 100,
					duration : 2,
					remove : false,
					useDisplay : false,
					afterStyle : "background:red",
					callback : function() {
						alert("Done!!!");
					},
					easing : 'easeNone',
					block : true
				});
	},
	_testMutipleEffect : function(){
		//chaining
//		Ext.get("target").fadeIn().highlight();
		//queuing
		Ext.get("target").fadeIn();
		Ext.get("target").highlight();
		
		//stopFx
		Ext.get("target").stopFx().slideOut();
		//concurrency
//		Ext.get("target").scale(200,100,{
//			concurrent : true
//		}).highlight();
		
	},
	_testCustomerAnimate : function(){
		Ext.get("target").moveTo(0,0,true).setOpacity(.5,true).scroll("tr",30,true);
		Ext.get("target").animate();
	},
	_testMask : function(){
//		var mask = new Ext.LoadMask(Ext.get("target"));
//		mask.show();
		
//		var mask = Ext.get("target").mask("加载中...","x-mask-loading")
//		window.setTimeout(function(){
//			mask.hide();
//		},3000);
		var store = this._initStore();
		var mask = new Ext.LoadMask(Ext.get("target"),{store:store});
		store.load();
	},
	_initStore : function(){
		//定义json　仓库
		var movieJsonStore = new Ext.data.JsonStore({
						url:"./json/movie.json",
						root : "rows",
						fields: [
									"id",
									"title",
									"director",
									{name:"released",type:'date',dateFormat:"Y-m-d"},
									"genre",
									"tagline",
									"coverthumb",
									{name:"price",type:'float'},
									{name:"active",type:'bool'}
							] 
					});
		return movieJsonStore;
	},
};

Ext.onReady(effectObj.init,effectObj,true);

分享到：