LearningExtJS_new 之 effect 的应用学习(八)!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional
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();//queuingExt.get("target").fadeIn();Ext.get("target").highlight();//stopFxExt.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);