LearningExtJS_new 之 effect 的应用学习(八)
<!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);