对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类
定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的
fadeIn( [Object options] ) : Ext.Element
渐显 options参数有以下属性
callback:Function 完成后的回叫方法
scope:Object 目标
easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会吧
afterCls:String 事件完成后元素的样式
duration:Number 事件完成时间(以秒为单位)
remove:Boolean 事件完成后元素销毁?
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化?
concurrent:Boolean 顺序还是同时执行?
stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除
fadeOut( [Object options] ) : Ext.Element
渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element
边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element
渐渐滑出视图,anchor定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean
指示元素是否当前有特效正在活动
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暂停
puff( [Object options] ) : Ext.Element
吹,吹,吹个大气球,元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element
缩放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx()
排队特效
shift( Object options ) : Ext.Element
位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element
slideOut( [String anchor], [Object options] ) : Ext.Element
滑入/滑出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element
停止特效
switchOff( [Object options] ) : Ext.Element
收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element
异步特效
分享到:
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
extjs-basex.js extjs-basex.js extjs-basex.js
extjs-theme-bootstrap-master.zip
从spket IDE 官网下载。 文件名: ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4,需要ext4.2.1.jsp2文件。
EXTJS-4.2.1.883
ExtJs学习资料28-Ext.data.JsonStore数据存储器
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
ext 是 ExtJs 的简称,是一个强大的js 类库。本资源主要包括三个大的文件ext-all.css,ext-base.js,ext-al.js。在引用ext 类库的时候,这三个文件必不可少。另外我还提供了ext2的一个简单例子,以便大家学习交流。
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
Extjs3.4 Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记 里面有3.4的开发包,附属:Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记
ExtJS-4.2.2-gpl.rar完整版,包含源码,示例,api,文档
extjs-mvc-architecture.pdf
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...
ext-7.0.0-gpl.zip
extjs4.0开发人员以及学习可以下载参考
在CDH使用oozie 的时候需要安装ext-2.2.zip; 新增和改进的功能包括: 1、FileUploadField 文件上传 体验例子见:http://extjs.com/deploy/dev/examples/form/file-upload.html 2、GMapPanel GMap扩展 体验...
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button ...主页:https://github.com/harrydeluxe/extjs-ux 注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。
1. ExtJs2.0学习系列(1)--Ext.MessageBox 2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 ...
extjs+commons-fileupload.jar 实现文件上传,能够支持多文件同时上串,在配置文件中配置临时文件夹和保存的路径
extjs-basex.js extjs-basex.js extjs-basex.js