目录
ExtJs系统分区性能指标音乐格式等离子展开
ExtJs系统分区性能指标音乐格式等离子展开
编辑本段ExtJs
Ext简介
Ext是一个强大的js类库，以前是基于
YAHOO-UI,现在已经完全独立了。
主要包括data、widget、form、grid、dd、menu，其中最强大的应该算grid了，编程思想是基于
面向对象编程(oop)，扩展性相当的好。可以自己写扩展，自己定义命名空间。web应用可能感觉太大。不过您可以根据需要按需加载您想要的类库就可以了。
主要包括三个大的文件：ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口)，在引用ext类库的时候，这三个文件必不可少。
它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建
富客户端的常用的组件。
从 Ext 2开始，商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。
目前的最新版本为4.0。
Ext动画功能
介绍一下Ext预置的11个动画功能。
1.slideIn/slideOut：
元素的滑进或滑出效果。默认slideIn是从顶部滑进的，而slideOut是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。其使用方法请看下面代码。
var el = Ext.get('elId');
el.slideIn(); //从顶部滑进
el.slideOut(); //从底部滑出
el.slideIn('l',{ easing: 'easeOut', duration: .5 }); //从左边滑进
2.puff：元素慢慢向四周扩大并逐渐消失。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.puff();
//自定义方式，元素消失后删除元素
el.puff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false })
3.switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.switchOff();
//自定义方式，元素消失后删除元素
el.switchOff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false });
4.highlight：利用设置的颜色高亮显示元素，然后逐渐消隐回原有颜色。默认是设置元素背景颜色，可通过设置attr属性设置高亮显示方式。如果没有初始颜色，可以使用endColor属性设置消隐后的颜色。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.highlight();
//自定义方式
el.highlight('0f0f0f',{ easing: 'easeOut', attr: 'color' duration: .5, endColor: 'dddddd' });
5.frame：从元素边界开始以水波扩散的方式提示用户。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.frame();
//自定义方式
el.frame('0f0f0f',{ duration: .5, });
6.pause：在
队列中的动画开始之前产生一个停顿。其使用方法请看下面代码。
el.pause(1); //停顿1秒
7.fadeIn/fadeout：实现渐变效果。fadeIn方法从透明渐变到不透明。fadeOut方法从不透明渐变到透明。通过endOpacity属性可设置渐变结束后的不透明度。要注意在IE中可能要设置useDisplay属性为true。其使用方法请看下面代码。
var el = Ext.get('elId');
el.fadeIn();
el.fadeOut();
//自定义方式
el.fadeIn({ endpacity: 1, easing: 'easeOut', duration: .5 });
8.scale：将元素的尺寸从原有尺寸过渡到设置的尺寸。其使用方法请看下面代码。
var el = Ext.get('elId');
el.scale(100，200);
//自定义方式
el.fadeIn(100，200，{ easing: 'easeOut', duration: .5 });
9.shift：元素渐变到新的位置、新的尺寸和不透明度。该方法至少需要位置、尺寸和不透明度其中一项设置，不然元素不会被改变。其使用方法请看下面代码。
var el = Ext.get('elId');
el.shift({ width:100, //元素的新宽度
height: 100, //元素的新高度
x: 10 , //元素的新x坐标
y: 10 , //元素的新y坐标
opacity: .8， //元素的新不透明度
easing: 'easeOut', duration: .5 }); //以上属性width、height、x、y、opacity至少必须有一项
10.ghost：当元素渐隐时，元素同时滑出。可通过第1个参数设置滑出位置。其使用方法请看下面代码。
var el = Ext.get('elId');
el.ghost();
//自定义方式，从左边滑出
el.ghost('l'，{ easing: 'easeOut', duration: .5, remove:false, userDisplay:fase });
11.animate：通过该方法可自定义复杂的动画效果。其使用方法请看下面代码。
var el = Ext.get('elId');
el.animate( { borderWith:{to : 3,from:0},
opacity: {to: .5, from:1}
height: {to 100 , from:el.getHeight()},
widht: {to 200 , from:el.getwidth()},
top:{by:-100,unit: 'px'} },
1,//动画长度，单位为秒，该参数可选
null, //
回调函数，该参数可选
'easeOut',//渐变方式，该参数可选
'run' //动画类型 );
在定义中，borderWidth、opactiy等属性可以为元素的任何样式属性。动画类型包括以下几个类型：
run：默认类型。
color：动画渐变背景、文本或边界颜色。
motion：在渐变过程中使用Bezier曲线作为
运动轨迹。
scroll：已垂直或水平滚动方式运动。
