ExtJS 对HTTP DOM元素的操作,进行了很好的封装。看几个具体的方法
Ext.Element :封装Dom元素通用操作,屏蔽了不同浏览器带来差异性问题。
用法:
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
动画效果:默认情况下没有动画效果
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
许多函数操作element有一个动态参数,这个参数用一个布尔类型指定默认动态效果。
// default animation
el.setWidth(100, true);
配置动态效果,一个对象文字和动画选项通常作为一个Element动态配置对象,也能够被指定。需要注意的是,Element动态配置选项是Ext.fx.Anim动态配置选项指定Fx 效果的一个子集。支持Element动态配置选项:
选项 默认 描述
--------- -------- ---------------------------------------------
duration .35 持续时间
easing easeOut The easing method
callback none A function to execute when the anim completes
scope this The scope (this) of the callback function
用法:
// Element animation options object
var opt = {
duration: 1,
easing: 'elasticIn',
callback: this.foo,
scope: this
};
// animation with some options set
el.setWidth(100, opt);
Element动画对象通常用于动画,通常由“anim”选项配置,“anim”允许你停止或操作动画。例子:
// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}