Alternate names
Ext.ElementExt.core.ElementHierarchy
Ext.BaseExt.dom.AbstractElementExt.dom.ElementSubclasses
Files
元素对齐
扩展事件
Defaults to: []
设置为true 则会为 box-model 问题 自动调整宽高.
Defaults to: true
追加到未提供单位的CSS值后的默认单位。
Defaults to: "px"
DOM元素
DOM元素
元素的默认显示模式(display mode).
Defaults to: ""
本身
获取当前类的引用，此对象被实例化。不同于 statics,
this.self是依赖范围，它意味着要使用动态继承。
参见 statics 详细对比
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // 依赖 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' 雪豹
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
此共享的对象是由样式名称作为键(例如 'margin-left' 或 'marginLeft')。 这些值是具有以下属性的对象:
name (String) : 要提交给 DOM 的实际名称。
这通常是由normalize返回的值。get (Function) : 一个钩子函数,将执行get在当前样式。
这些函数接收"(dom, el)"参数。dom参数是从中获取这种样式的DOM元素。
el参数(可能为空)是Ext.Element对象。set (Function) : 一个钩子函数,将执行set在当前样式。
这些函数接收"(dom, value, el)"参数。dom参数是从中获取这种样式的DOM元素。
value参数是样式的新值。
el参数(可能为空)是Ext.Element对象。this指针是包含get或set的对象，这意味着
this.name 如果需要则可以进行访问。钩子函数都是可选的。
Defaults to: {}
与Ext.dom.Element.setVisibilityMode一起使用的显示模式常量。 添加或删除Ext.Layer.visibilityCls类来隐藏元素。
Defaults to: 4
与Ext.dom.Element.setVisibilityMode一起使用的显示模式常量。 使用CSS 'display' 属性来隐藏元素。
Defaults to: 2
与Ext.dom.Element.setVisibilityMode一起使用的显示模式常量。 使用CSS绝对定位和top/left偏移来隐藏元素。
Defaults to: 3
与Ext.dom.Element.setVisibilityMode一起使用的显示模式常量。 使用CSS 'visibility' 属性来隐藏元素。
请注意，在此模式下，isVisible 对于一个元素可能返回 true 即使它实际上有一个隐藏的父元素。为此，在大多数情况下， 使用OFFSETS模式是一个更好的选择。
Defaults to: 1
设置在此元素上鼠标按下并随后放开(click 效果)时的事件处理器,用来添加和删除相应的 css 类.
要添加的class类名
在添加class之前执行的测试函数. 将会有一个元素实例作为参数传递给此函数. 如果此函数返回 false, 则不会添加css类.
执行函数 testFn 的对象.
this
设置此元素获得焦点时的事件处理器,用来添加和删除相应的 css 类.
要添加的class类名
在添加class之前执行的测试函数. 将会有一个元素实例作为参数传递给此函数. 如果此函数返回 false, 则不会添加css类.
执行函数 testFn 的对象.
this
设置鼠标悬停(over)在此元素上时的事件处理器,用来添加和删除相应的 css 类.
要添加的class类名
在添加class之前执行的测试函数. 将会有一个元素实例作为参数传递给此函数. 如果此函数返回 false, 则不会添加css类.
执行函数 testFn 的对象.
this
成员
为此元素创建一个 KeyMap
KeyMap 配置项. 更多信息请参考 Ext.util.KeyMap
新创建的 KeyMap
on 的快捷方式.
添加一个事件处理器(event handler)到此元素.
要处理的事件名字.
事件处理函数. 此函数可以接收到以下 3 个参数 :
evt : EventObject
描述事件的 EventObject 对象.
el : HtmlElement
作为事件 target 的 DOM 元素. 需要注意, 如果使用事件代理(delegate) 选项,则有可能被过滤掉.
o : Object
设置到监听器 listener 的 配置选项对象(options object).
(可选参数) 事件处理函数的作用域 (this 引用). 如果省略此参数, 默认是 this 元素Element.
(可选参数) 包含事件处理器配置选项的一个对象. 可以包含以下属性的任意组合:
scope Object :
事件处理函数的作用域 (this 引用). 如果省略此参数, 默认是 this 元素Element.
delegate String:
代理,一个简单的选择器(selector)字符串,用来过滤 target 或者查找其内部元素. 详细信息请参阅下面的内容.
stopEvent Boolean:
如果设置为 true 则停止事件. 也就是停止事件传播并阻止默认行为.
preventDefault Boolean:
设置为 true 则阻止默认行为.
stopPropagation Boolean:
如果设置为 true 则停止事件传播
normalized Boolean:
如果设置为 false 则将浏览器事件直接传递给事件处理器函数,而不是包装后的 Ext.EventObject
target Ext.dom.Element:
只有事件直接发生在 target 元素上时才触发事件处理函数, 如果是从子节点冒泡而来,则不触发.
delay Number:
在事件触发后延迟多少个毫秒(milliseconds)以后才执行回调函数.
single Boolean:
设置为 true 则只在下一次事件触发时调用处理函数,调用完成即移除.
buffer Number:
设置以后将会在指定的毫秒数以后由 Ext.util.DelayedTask 来调度执行. 如果在此时间范围内事件再次触发, 那么旧的事件处理器不会被执行,而在其调度时间点上执行新的事件处理器.
组合选项(Combining Options)
使用 options 参数, 可以组合(combine)为 不同类型的监听器:
添加一个 延迟执行,只执行一次(one-time),自动停止事件, 并指定自定义参数 (forumId) 的事件监听. 配置选项options 对象会作为处理函数的第3 个参数. 代码如下:
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
同时绑定多个事件
on 方法也允许通过单个配置对象参数,此参数对象包含的各个属性,分别是多个事件及事件处理器配置.
Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
或者简写的语法格式:
代码:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
delegate
这是一个配置选项,通过注册的代理事件处理器,可以用来协助处理事件. 事件代理(Event delegation)是用来减少内存消耗,防止内存泄露(memory-leaks) 的一种技术手段. 可以在容器上注册一个事件而不必在容器内部的每个元素上注册一个. 通过设置此配置选项为一个简单的选择器(selector), 则 target 元素将被过滤为target的子孙元素. 示例代码如下:
// 假设有如下HTML片段:
<div id='elId'>
<p id='p1'>paragraph one</p>
<p id='p2' class='clickable'>paragraph two</p>
<p id='p3'>paragraph three</p>
</div>
// 利用事件代理机制,则可以在父容器上只注册一个事件处理函数即可处理在各个子元素上发生的事件:
el = Ext.get('elId');
el.on(
'click',
function(e,t) {
// 事件处理逻辑 ...
console.info(t.id); // 'p2'
},
this,
{
// 过滤 target 为css类 'clickable' 元素的子孙元素.
delegate: '.clickable'
}
);
this
通过指定的锚点将此元素与另一个元素对齐. 如果另一个元素时文档document本身,则对齐到 viewport. 参数 position 是可选的, 并可以指定为以下的格式:
除了锚点, 参数 position 也支持 "?" 字符. 如果问号字符 "?" 出现在position 字符串的末尾, 则元素将试图对齐指定的位置, 如果必要,则会被适当调整以限制在viewport中. 注意: 为了执行 viewport 的限制,被对齐的元素将可能被对齐到其他的位置. 下表是所有支持的锚点位置(anchor positions):
值 说明 ----- ----------------------------- tl 左上角(top left corner) (默认值) t 上边界(top edge)的中心 tr 右上角(top right) l 左边界(left edge)的中心 c 元素的中心(center) r 右边界(right edge)的中心 bl 左下角(bottom left) b 下边界(bottom edge)的中心 br 左下角(bottom right)
用法示例:
// 使用默认的对齐位置("tl-bl", 不受限制) 将 el 对齐到 other-el
el.alignTo("other-el");
// 对齐el元素的左上角到other-el元素的右上角 (受viewport限制)
el.alignTo("other-el", "tr?");
// 对齐el元素的右下角到other-el元素的左边界中心
el.alignTo("other-el", "br-l?");
// 对齐el元素的中心点center到other-el元素的左下角,
// 并调整 x 的位置偏移为 -6 pixels (y 位置偏移为 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
要对齐的元素.
要对齐的位置
Defaults to: "tl-bl?"
格式为 [x, y] 的位置偏移
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
this
当窗口改变大小时,锚定一个元素到另一个元素,并重新对齐.
要对齐的元素.
要对齐的位置.
格式为 [x, y] 的位置偏移
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
设置为 true 则监视body 滚动条及滚动位置. 如果此参数是数字, 将被用来作为缓冲延迟 (默认是 50ms).
动画完成后的回调函数.
this
将传递进来的元素(列表)添加到当前元素的后面
节点的id，一个DOM节点或现有元素。
将当前元素添加到传递进来的元素之后
新的父元素。 节点的id，一个DOM节点或现有元素。
用一个指定样式class的包含9个元素DIV将当前元素包装起来, 默认是灰色的容器,圆角,倾斜背景,4个方向的阴影.
这种特殊的标签Ext用来在 frame=true, Ext.window.Window)中 包装 (Ext.button.Button, Ext.panel.Panel元素 形成的HTML元素标签格式如下:
Ext.dom.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
用法示例如下:
// 基本的 box 包装
Ext.get("foo").boxWrap();
// 你也可以添加自定义的CSS class类, 并使用 CSS 继承规则(inheritance rules)来自定义box的外观.
// 'x-box-blue' 是内置的可选方案 -- 请查阅示例中相关的 CSS 定义来了解如何创建自定义的 box wrap 样式.
Ext.get("foo").boxWrap().addCls("x-box-blue");
应用到包装元素上的 base CSS 类. 注意: 根据此类名有一系列的CSS规则来组成整体的特效效果, 因此如果你提供了自定义的基本CSS类, 请确保也支持所有必要的子类规则.
Defaults to: "x-box"
创建的box结构的最外层包装元素.
当一个元素在DOM中移动, 或者通过 display:none 实现隐藏时, 将会失去布局(layout),
因此所有内部元素(descendant elements)的滚动位置也会丢失掉.
此函数将缓存这些滚动值(caches them), 并返回一个函数(function), 用来恢复缓存的滚动位置(cached positions). 下面的例子, 将面板元素Panel 从一个容器移动到另一个容器中,因此失去所有的滚动位置(scroll positions):
var restoreScroll = myPanel.el.cacheScrollValues();
myOtherContainer.add(myPanel);
restoreScroll(); // 恢复
一个函数,调用此函数则恢复所有子元素为原来的滚动位置.
请注意返回的函数是一个闭包(closure)函数,将会持有cacheScrollValues这个范围，
如果用 var 引用指向返回的函数, 请记得尽快的释放它;
它将脱离使用范围, 并且引用将被释放(这句有点不通畅_).
调用原来的方法，这是以前的override重写
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
This method has been deprecated since 4.1
版本 使用 callParent 代替.
参数的参数，数组或'参数'对象
来自当前方法，例如： this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
这可以用来重写如下:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // 调用原来的My.Derived构造
}
});
var obj = new My.Derived();
alert(obj.x); // 现在提示 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
然后，它也可以重写静态方法。
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // 现在提示 40
这个参数, 通过当前方法得到数组或者 arguments 对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
将本元素置于 viewport 或者 另一个 Element 的中心. 当前元素的中心对齐到centerIn元素的中心
在那个元素的中心放置本(this)元素.
传入一个CSS选择符的参数，然后基于该选择符，"直接"选取单个子节点(选择符不应有id)。
CSS选择符
true表示为返回标准DOM类型的节点，false的话返回Ext.dom.Element类型的对象。
Defaults to: false
子节点，Ext.Element类型(或DOM节点如果returnDom = true)
删除空的(Empty),或者全是空格填充的文本节点. 合并相邻的文本节点.
默认情况下,如果元素被清空以后,将会记录下来. 因此调用多少次都没关系. 但如果更新了元素的内容,则可以指定为true来强制清理.
Defaults to: false
当文档(document) load的时候,清除位置信息,恢复为默认值.
为 left, right, top, bottom 这些属性所使用的值. 当然也可以使用 'auto'.
Defaults to: ""
创建此元素的 代理元素(proxy element).
代理元素的类名 或者DomHelper配置对象
代理元素将被渲染(render,添加)到的元素或id. 默认是: document.body.
设置为true 则对齐并调整代理元素同this元素当前大小一致.
Defaults to: false
创建的代理元素(proxy element)
为此元素 创建一个 iframe 垫片(shim) 来阻止selects 和其他窗口对象(windowed objects) 显示XXX(showing through).
新创建的iframe元素
remove的别名。
删除此元素的dom引用。注意在Ext.removeNode处理事件和缓存清除。
传入一个CSS选择符的参数，然后基于该选择符，不限定深度进行，搜索符合的话选取单个直接的子节点(选择符不应有id)。
CSS选择符
true表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点
Defaults to: false
子节点，Ext.Element类型(或DOM节点如果returnDom = true)
setVisibilityMode(Element.DISPLAY) 的快捷封装
当可见时设置display等于什么(What to set display to when visible).
this
对元素显示淡入效果 (从 透明transparent 到 不透明opaque).
最终的透明度可以通过 opacity 配置项来指定.
用法示例:
// 默认效果: 淡入效果, opacity 从 0 渐变为 100%
el.fadeIn();
// 自定义效果: opacity 从 0 渐变为 100%,持续时间 2 秒
el.fadeIn({ opacity: .75, duration: 2000});
// 设置默认值的常用配置选项
el.fadeIn({
opacity: 1, // 可以是 0 到 1 之间的任意数字(例如 .5)
easing: 'easeOut',
duration: 500
});
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
对元素显示淡出效果 (从 不透明opaque 到 透明transparent).
最终的透明度可以通过 opacity 配置项来指定.
注意: IE可能需要 useDisplay:true 来正确的重新显示(redisplay correctly).
用法示例:
// 默认效果: 淡出元素, opacity 从 当前值渐变为 0
el.fadeOut();
// 自定义效果: 淡出元素, opacity 从 当前值渐变为 25%,持续2秒
el.fadeOut({ opacity: .25, duration: 2000});
// 设置默认值的常用配置选项
el.fadeOut({
opacity: 0, // 可以是 0 到 1 之间的任意数字(例如 .5)
easing: 'easeOut',
duration: 500,
remove: false,
useDisplay: false
});
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符(简易选择符形如 div.some-class 或 span:first-child)
要进行测试的简易选择符
搜索深度，可以为数字或元素，其导致向上遍历停止， 并不考虑纳入作为结果。(默认是 50 || document.documentElement)
true表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点
Defaults to: false
匹配的DOM节点(null的话表示没有找到匹配结果)
定位于此节点的"父节点"，以此节点的"父节点"为起点，向外围搜索外层的"父父"节点，搜索条件必须符合并匹配传入的简易选择符(简易选择符形如 div.some-class 或 span:first-child)
要进行测试的简易选择符
搜索深度，可以为数字或元素，其导致向上遍历停止， 并不考虑纳入作为结果。(默认是 50 || document.documentElement)
true表示为返回Ext.Element类型的对象，false的话返回标准DOM类型的节点
Defaults to: false
匹配的DOM节点(null的话表示没有找到匹配结果)
获取第一个子元素，跳过文本节点
通过简易选择符来查找第一个子元素
true表示为返回原始过的DOM元素，而非Ext.Element类型的元素
Defaults to: false
第一个子元素或null
试着让元素(element)获取焦点(focus). 捕获并忽略所有异常.
延迟聚焦的毫秒值
this
显示一个爆炸似的涟漪, 并让边界衰减以使元素充满吸引力. 用法如下:
// 默认效果: 单个淡蓝色的波纹(涟漪)
el.frame();
// 自定义效果: 持续3秒钟的 3 个红色的涟漪(red ripples).
el.frame("#ff0000", 3, { duration: 3 });
// 设置默认值的常用配置选项
el.frame("#C3DAF9", 1, {
duration: 1 //每个单独的涟漪的持续时间
// 注意: Easing在此处是不可配置的,如果包含了也会被忽略
});
(可选参数) 边框的颜色. 应该是没有开头的#号的 6 字符的十六进制颜色值 (默认是 light blue: 'C3DAF9').
(可选参数) 要显示的波纹(ripples)的数量 (默认是 1)
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
返回在DOM中活动的元素。如果浏览器支持在文档上的 activeElement， 则这被返回。如果不支持， 焦点将被跟踪并且活动元素在内部维护。
在文档中的活动(焦点)元素。
获取要对齐此元素到另一个元素时的 x,y 坐标. 关于anchor位置的取值与详细信息请参考 alignTo.
要对齐的元素.
要对齐的位置 (默认是 "tl-bl?",本元素左上角对齐到目标元素的左下角)
Defaults to: "tl-bl?"
位置偏移量,格式: [x, y]
[x, y]
Overrides: Ext.dom.AbstractElement.getAlignToXY
在当前元素上根据给定的anchor锚点位置获得 x,y 坐标.
指定的 anchor 位置.
关于anchor位置的取值与详细信息请参考 alignTo.
Defaults to: "c"
设置为 true 则获取的是元素内部相对的 (top/left-relative) anchor 位置,而不是绝对坐标
包含了目标元素尺寸size 的对象,用来计算anchor 位置. 格式如下: {width: (目标宽度,target width), height: (目标高度,target height)} (默认为元素当前的大小)
[x, y] 包含元素 x与y坐标值的数组
Overrides: Ext.dom.AbstractElement.getAnchorXY
返回 offsetHeight, 如果offsets不可用,则根据 CSS height 以及padding 或 borders来模拟此元素的高度. 如果没有通过CSS设置宽度,而且又指定了 display:none,则此方法将不起作用.
返回 offsetWidth, 如果offsets不可用,则根据 CSS width 以及padding 或 borders来模拟此元素的宽度. 如果没有通过CSS设置宽度,而且又指定了 display:none,则此方法将不起作用.
通过给定的约束,返回此元素必须被平移位置的向量,格式为 [X, Y].
如果此元素不需要移动则返回 false.
在约束条件中,优先考虑限制顶端和左边. (Priority is given to constraining the top and left within the constraint).
限制参数可以是此元素将被限制在其内的已存在的元素(element), 或者是此元素将被限制在其内的区域 Region.
此元素将被限制在其内的 元素Element 或者 区域Region.
一个计划位置 [X, Y]; 为了测试有效性,使用一个向量来作为计划的位置,而不是此元素的当前位置;
返回元素的innerHTML，如果元素的DOM不存在， 则返回一个空字符串。
返回此元素到给定的el元素之间的偏移量. 两个元素都必须在DOM树中, 不能有 display:none 这个属性, 才会有绝对坐标(page coordinates).
要计算偏移量的元素.
XY 绝对坐标的偏移 (例如. [100, -200])
Overrides: Ext.dom.AbstractElement.getOffsetsTo
返回一个对象，该对象定义此元素的区域，可以传递给setBox 来设置另一个元素的大小/位置，以匹配当前元素。
If true an Ext.util.Region will be returned
得到当前元素的位置信息, 返回包含所有CSS位置属性的对象. 在执行更新时可以先获取快照信息(snapshot),完成以后再使用 #setPostioning 来对元素进行恢复.
返回此元素的区域信息(region). Element 必须是DOM树中的一部分,并且要有区域信息 (display:none 或者是不在文档树中的元素将会 return false).
包含"top, left, bottom, right" 这几个成员属性的区域(Region,范围)对象.
创建一个调用函数，清理工作围绕在 WebKit RightMargin bug的问题。工作围绕的是添加"display: 'inline-block'"到 调用getComputedStyle之前的元素，然后恢复其原有的显示值。 这样做的问题是，它破坏选择的 INPUT 或 TEXTAREA 元素 (比如"I型光标"消失但是焦点会遗留)。 在清理之后，我们需要捕获任何此类元素的所选内容， 在我们恢复显示样式之后还原它。
被调整的最顶层元素。
根据 Ext.scopeResetCSS当前 element 的parent node
parent元素
返回此元素 的内容 区域范围(region). 即除去 borders 与 padding 的中间部分区域.
包含"top, left, bottom, right" 这几个成员属性的区域(Region,范围)对象.
返回可用于放置内容元素的尺寸。
如果该元素(或任何祖先元素)有 CSS 样式display: none，尺寸将会是零。
示例:
var vpSize = Ext.getBody().getViewSize();
// 所有窗口创建之后将都具有默认值为90%的高度和95%的宽度
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// 要处理窗口大小调整，你必须在onWindowResize挂钩上。
getViewSize利用clientHeight/clientWidth，不包括滚动条的大小调整。 若要获取包括滚动条的大小，使用getStyleSize
适配器级别的处理特殊情况下，IE浏览器和严格的模式来处理的文档正文的大小, 等等。
基于页面坐标,取得元素的当前位置.即取得绝对坐标. Element 必须是DOM树中的一部分,并且要有页面坐标 (display:none 或者是不在文档树中的元素将会 return false).
元素的 XY 位置数组.
Overrides: Ext.dom.AbstractElement.getXY
淡出元素的同时滑出元素. 可以指定一个锚点用来设置动画效果的终点.用法示例:
// 默认效果: 在淡出的同时向下滑
el.ghost();
// 自定义效果: 以2秒的持续时间,向右滑动淡出此元素
el.ghost('r', { duration: 2000 });
// 设置默认值的常用配置选项
el.ghost('b', {
easing: 'easeOut',
duration: 500
});
元素本身
私有函数,根据当前逻辑上的可见状态(logical visibility state) 决定此元素是否有可用的宽高(relevant height and width available)
隐藏此元素 - 根据 display mode 来决定使用 "display" 还是 "visibility". 参见 setVisible.
this
Overrides: Ext.dom.AbstractElement.hide
通过设置颜色值来突出显示(Highlight)此元素. (默认应用于背景色background-color, 但也可以通过options参数的属性 "attr" 来配置). 效果执行以后,再渐变还原为原来的颜色(original color). 如果没有原始颜色值, 则应该提供 "endColor" 配置选项, 终点颜色将在动画执行完成以后被清除。 用法示例如下:
// 默认效果: 将背景色高亮为黄色(yellow)
el.highlight();
// 自定义效果: 高亮前景的文本(color)为蓝色,持续2秒钟
el.highlight("0000ff", { attr: 'color', duration: 2000 });
// 设置默认值的常用配置选项
el.highlight("ffff9c", {
attr: "backgroundColor", //可以是任意支持颜色值的 CSS 属性(attribute)
endColor: (当前颜色值) 或者 "ffffff",
easing: 'easeIn',
duration: 1000
});
(可选参数) 高亮的颜色. 应该是没有开头的#号的 6 字符的十六进制颜色值 (默认是 yellow: 'ffff9c')
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
设置当鼠标移入和移出元素时的事件处理器.
鼠标指针进入元素时的回调函数.
鼠标指针移出元素时的回调函数.
函数调用的执行对象 (this 引用) . 默认是 Element 的 DOM 元素.
监听器的配置选项. 参见 the options parameter.
this
这个类的初始化配置。典型例子:
Ext.define('My.awesome.Class', {
// 这是默认配置
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome' 超级棒
配置
mixins 混入原型 键-值对
为此元素初始化一个 Ext.dd.DDProxy 对象.
DDProxy 对象所属的组
DDProxy 的配置对象
在 DDProxy 对象上要 override/implement 的方法所组成的object.
创建的 DDProxy 对象
为此元素初始化一个 Ext.dd.DDTarget 对象.
DDTarget 对象所属的组
DDTarget的配置对象
在 DDTarget 对象上要 override/implement 的方法所组成的object.
创建的 DDTarget 对象
在DOM中，把当前元素插入到所传递进来的元素之后
要插入之后的元素。 节点的id，一个DOM节点或现有元素。
将当前元素在DOM中插入到传递进来的元素之前
将在其之前插入此元素的元素。 节点的id，一个DOM节点或现有元素。
插入（或创建）一个元素（或者一个DomHelper配置），作为当前元素的第一个子节点
id或要插入的元素或一个 DomHelper 配置项来创建和插入
插入HTML片断到当前元素。
插入html的位置，与当前元素的位置关系 - beforeBegin, afterBegin, beforeEnd, afterEnd。 有关详细信息参见 Ext.dom.Helper.insertHtml 。
HTML片断
true表示为返回一个Ext.dom.AbstractElement类型的DOM对象。
Defaults to: false
被插入之节点(或最近的，如果超过一处插入的话)。
将传递进来的元素（或者DomHelper配置）插入（或者创建）成当前元素的兄弟节点。
id，要插入的元素或一个 DomHelper 的配置来创建和插入 或 这些任意参数的一个数组。
'before' 或 'after'
Defaults to: "before"
设置为true将返回原始的DOM元素而不是Ext.dom.AbstractElement
Defaults to: false
插入的元素。如果传递数组，则最后插入的元素将被返回。
获取最后一个子元素，跳过文本节点
通过简易选择符来查找最后一个元素
true表示为返回原始过的DOM元素，而非Ext.Element类型的元素
Defaults to: false
最后一个元素或null
直接调用 Ext.ElementLoader 的 Ext.ElementLoader.load 方法. 本方法将参数原样传递给 Ext.ElementLoader.load.
this
在此元素上放置遮罩层,以阻止用户操作. 需要 core.css 支持. 此方法只可以在接受子节点的元素对象上使用.
遮罩层(mask)元素.
Overrides: Ext.dom.AbstractElement.mask
监控此元素上的鼠标离开. 只有在指定的延迟之内鼠标没有再次移入此元素时才调用 事件处理函数. 假若鼠标又回来 过 , 那么函数不会被调用.
在调用处理函数之前等待鼠标回来的延迟时间 单位毫秒 milliseconds.
回调函数,如果指定时间之内鼠标都没有再次回来过,则会被调用.
回调函数的执行范围 (this 引用). 默认是当前元素(Element).
添加到此元素的监听器对象,可被停止. 用法示例如下:
// 如果鼠标移出去 250毫秒以上,则隐藏菜单
this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
...
// 在菜单摧毁时 移除 mouseleave 监控器
this.menuEl.un(this.mouseLeaveMonitor);
设置元素的绝对位置(page coordinates), 不管元素是何种定位方式(is positioned). 元素必须是DOM树中的一部分,并且要有页面坐标 (display:none 或者是不在文档树中的元素将会 return false).
新位置的X 值 (绝对坐标,coordinates are page-based)
新位置的Y 值 (绝对坐标,coordinates are page-based)
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
如果此元素需要一个明确的 tabIndex 以使其可获得焦点则返回 true . input域,文本区,按钮,有 href 属性的a标签 等元素不需要 tabIndex, 而结构型的元素需要.
获取下一个侧边节点，跳过文本节点
通过简易选择符来查找下一个侧边节点
true表示为返回原始过的DOM元素，而非Ext.Element类型的元素
Defaults to: false
下一个侧边节点或null
添加一个事件处理器(event handler)到此元素.
要处理的事件名字.
事件处理函数. 此函数可以接收到以下 3 个参数 :
evt : EventObject
描述事件的 EventObject 对象.
el : HtmlElement
作为事件 target 的 DOM 元素. 需要注意, 如果使用事件代理(delegate) 选项,则有可能被过滤掉.
o : Object
设置到监听器 listener 的 配置选项对象(options object).
(可选参数) 事件处理函数的作用域 (this 引用). 如果省略此参数, 默认是 this 元素Element.
(可选参数) 包含事件处理器配置选项的一个对象. 可以包含以下属性的任意组合:
scope Object :
事件处理函数的作用域 (this 引用). 如果省略此参数, 默认是 this 元素Element.
delegate String:
代理,一个简单的选择器(selector)字符串,用来过滤 target 或者查找其内部元素. 详细信息请参阅下面的内容.
stopEvent Boolean:
如果设置为 true 则停止事件. 也就是停止事件传播并阻止默认行为.
preventDefault Boolean:
设置为 true 则阻止默认行为.
stopPropagation Boolean:
如果设置为 true 则停止事件传播
normalized Boolean:
如果设置为 false 则将浏览器事件直接传递给事件处理器函数,而不是包装后的 Ext.EventObject
target Ext.dom.Element:
只有事件直接发生在 target 元素上时才触发事件处理函数, 如果是从子节点冒泡而来,则不触发.
delay Number:
在事件触发后延迟多少个毫秒(milliseconds)以后才执行回调函数.
single Boolean:
设置为 true 则只在下一次事件触发时调用处理函数,调用完成即移除.
buffer Number:
设置以后将会在指定的毫秒数以后由 Ext.util.DelayedTask 来调度执行. 如果在此时间范围内事件再次触发, 那么旧的事件处理器不会被执行,而在其调度时间点上执行新的事件处理器.
组合选项(Combining Options)
使用 options 参数, 可以组合(combine)为 不同类型的监听器:
添加一个 延迟执行,只执行一次(one-time),自动停止事件, 并指定自定义参数 (forumId) 的事件监听. 配置选项options 对象会作为处理函数的第3 个参数. 代码如下:
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
同时绑定多个事件
on 方法也允许通过单个配置对象参数,此参数对象包含的各个属性,分别是多个事件及事件处理器配置.
Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
或者简写的语法格式:
代码:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
delegate
这是一个配置选项,通过注册的代理事件处理器,可以用来协助处理事件. 事件代理(Event delegation)是用来减少内存消耗,防止内存泄露(memory-leaks) 的一种技术手段. 可以在容器上注册一个事件而不必在容器内部的每个元素上注册一个. 通过设置此配置选项为一个简单的选择器(selector), 则 target 元素将被过滤为target的子孙元素. 示例代码如下:
// 假设有如下HTML片段:
<div id='elId'>
<p id='p1'>paragraph one</p>
<p id='p2' class='clickable'>paragraph two</p>
<p id='p3'>paragraph three</p>
</div>
// 利用事件代理机制,则可以在父容器上只注册一个事件处理函数即可处理在各个子元素上发生的事件:
el = Ext.get('elId');
el.on(
'click',
function(e,t) {
// 事件处理逻辑 ...
console.info(t.id); // 'p2'
},
this,
{
// 过滤 target 为css类 'clickable' 元素的子孙元素.
delegate: '.clickable'
}
);
this
返回当前节点的那个父节点，可选地可送入一个期待的选择符
通过简易选择符来查找父节点
true表示为返回原始过的DOM元素，而非Ext.Element类型的元素
Defaults to: false
父节点或是null
This method has been deprecated
4.0 在所有后续动画队列执行之前,创建一个pause暂停效果. 如果在pause后面没有动画队列(effects queued),则pause也就没有什么效果. 用法示例:
el.pause(1);
暂停的时间(单位为秒)
元素本身
获取上一个侧边节点，跳过文本节点
通过简易选择符来查找上一个侧边节点
true表示为返回原始过的DOM元素，而非Ext.Element类型的元素
Defaults to: false
上一个侧边节点或null
以各个方向缓慢放大的效果 淡出 此元素. 当动画效果完成后, 此元素将会被隐藏 (visibility = 'hidden'), 但是 block 的元素将会继续占用文档中的位置. 用法如下:
// 默认效果
el.puff();
// 设置默认值的常用配置选项
el.puff({
easing: 'easeOut',
duration: 500,
useDisplay: false
});
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
传入一个CSS选择符的参数，然后基于该选择符选取其子节点(因为id的元素唯一的，所以选择符不应是id的选择符)。
CSS选择符
匹配节点之数组
在此对象上创建一个事件处理器 以便当事件出发后被此元素所处理以后, 移入可以传播到其他对象 (例如, 再用哪个对象触发一次).
要继续传播的事件名字
继承 Ext.util.Observable 的任意对象,用于供触发继续传播事件所使用的环境(context)
删除此元素的dom引用。注意在Ext.removeNode处理事件和缓存清除。
un 的快捷方式.
从此元素移除一个事件处理器(event handler).
Note: 如果在 添加(adding) 监听器listener时明确指定了 执行范围 scope, 那么此处也必须指定同样的调用环境 scope.
使用示例:
el.un('click', this.handlerFn);
// 或者
el.removeListener('click', this.handlerFn);
要移除 handler 的事件名字.
要移除的事件处理函数.
The handler function to remove. 必须是在调用on 时添加的那个函数引用.
如果在 添加(adding) 监听器listener时明确指定了 执行范围 scope, 那么此处也必须指定同样的调用环境 scope.
this
使用当前元素替换传递进来的元素
要替换的元素。 节点的id，一个DOM节点或现有元素。
使用传递进来的元素替换当前元素
新的元素 (节点的id，一个DOM节点或现有元素) 或要创建的元素的一个 DomHelper 的配置
This method has been deprecated
4.0 动画显示元素尺寸的改变,从起始的 height/width 过渡到最终的 height/width. 此方法是 shift 的一个快捷实现. 用法示例:
// 将宽高裁剪到 100x100 像素.
el.scale(100, 100);
// 设置默认值的常用配置选项.
// 如果传入的相关属性是null,则 height 和 width 默认是元素已存在的值.
el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
}
);
新的宽度 (传入 undefined 则保持原来的宽度)
新的高度 (传入 undefined 则保持原来的高度)
(可选参数) 包含任意Fx配置选项的字面量对象
元素本身
根据指定的方向, 滚动此元素. 执行边界检查,以确保在可滚动的范围.
方向值可以是:
"l" (或者 "left")"r" (或者 "right")"t" (或者 "top", 或者 "up")"b" (或者 "bottom", 或者 "down")滚动此元素多少距离,单位:像素
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
如果滚动触发,则返回 true; 如果元素不是立即滚动,而是直到可以滚动时才执行,则返回 false.
根据提供的delta值滚动此元素,可选择是否显示动画效果.
下面的 3 个写法都是等效的:
el.scrollBy(10, 10, true);
el.scrollBy([10, 10], true);
el.scrollBy({ x: 10, y: 10 }, true);
可以是 x 的变化值(delta),或者是指定 x 和 y 的delta值的数组, 或者是含有 "x" 和 "y" 属性的对象.
可以是 y 的变化值(delta), 或者是动画的标志位(animate flag)或动画配置对象.
如果 delta 值是分开的两个参数,那么此参数值代表 动画标志位(flag)/动画配置对象.
this
滚动此元素到给定的容器(container)内.
元素要滚动到的容器(container). 可以是字符串值 string (id), dom 节点, 或者 Ext.Element 对象.
Defaults to: document.body
设置为false,则禁用水平滚动(horizontal scroll).
Defaults to: true
this
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是"选择"的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回(因为id的元素唯一的，所以选择符不应是id的选择符)。
CSS选择符
在同一处 设置元素的位置和大小( position and size). 如果 animation 为 true 则同时并发地对 width, height, x 和 y 进行动画.
新位置的X 值 (绝对坐标,coordinates are page-based)
新位置的Y 值 (绝对坐标,coordinates are page-based)
新的宽度. 可以是以下两种类型:
新的高度. 可以是以下两种类型:
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
设置 CSS 属性 display.如果指定了参数 value 为布尔值 true，则使用保存在originalDisplay中的原来的display属性.
this
设置元素的高度。
// 高度更改为200px的地方和使用默认配置进行动画处理
Ext.fly('elementId').setHeight(200, true);
// 更改高度为150px，使用一个自定义的配置进行动画处理
Ext.fly('elId').setHeight(150, {
duration : .5, // 动画会有0.5秒的持续时间
// 将更改内容为"finished"
callback: function(){ this.update("finished"); }
});
新高度。这可能是其中一个:
true表示为默认的动画，或是一个配置项对象，这个配置项是标准的"元素动画"对象
this
设置元素的绝对位置(page coordinates), 不管元素是何种定位方式(is positioned). 元素必须是DOM树中的一部分,并且要有页面坐标 (display:none 或者是不在文档树中的元素将会 return false).
新位置的X 值 (绝对坐标,coordinates are page-based)
新位置的Y 值 (绝对坐标,coordinates are page-based)
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
设置元素的透明度
新的透明度. 0 = transparent完全透明, .5 = 50% visibile, 1 = 完全可见, etc
可以设置为标准的 Element animation 配置对象;
如果设置为 true 则使用动画配置: ({duration: .35, easing: 'easeIn'})
this
根据给定的区域信息,设置元素的位置与大小. 如果 animation 为 true 则同时并发地对 width, height, x 和 y 进行动画.
要设置的区域
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
设置元素的大小尺寸。如果动画选项被打开，高度和宽度都会顺带产生变化的动画效果。
新宽度。这可能是其中一个:
{width: widthValue, height: heightValue}。新高度。这可能是其中一个:
true表示为默认的动画，或是一个配置项对象，这个配置项是标准的"元素动画"对象
this
设置元素的样式，也可以用一个对象参数包含多个样式。
要设置的样式属性，或是包含多个样式的对象。
样式属性的值，如果第一个参数是对象，则这个参数为null。
this
设置元素的可见性(visibility,参见 details). 如果 visibilityMode 设置为 Element.DISPLAY, 将会使用 display 这个(CSS)属性来显示/隐藏 此元素. 否则就会使用 visibility 这个(CSS)属性. 默认情况下使用 visibility 属性来显示/隐藏 此元素.
决定此元素是否可见
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
this
Overrides: Ext.dom.AbstractElement.setVisible
设置元素的宽度。
新宽度。这可能是其中一个:
true表示为默认的动画，或是一个配置项对象，这个配置项是标准的“元素动画”对象。
this
设置元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标 (display:none或未加入的elements返回false)。
设置元素的绝对位置(page coordinates), 不管元素是何种定位方式(is positioned). 元素必须是DOM树中的一部分,并且要有页面坐标 (display:none 或者是不在文档树中的元素将会 return false).
新设置的包含X与Y值的数组 [x, y] ;绝对坐标(coordinates are page-based)
设置为 true 则使用默认动画(animation), 也可以设置为标准的 Element animation 配置对象
this
Overrides: Ext.dom.AbstractElement.setXY
设置元素基于页面坐标的Y位置。元素必须是DOM树中的一部分才拥有页面坐标 (display:none或未加入的elements会当作无效而返回false)。
This method has been deprecated
4.0 动画显示元素尺寸的渐变,可以是任意的元素尺寸属性的组合. 比如 xy 位置 和/或 透明度opacity, 不指定的的属性不会被改变. 此效果至少需要配置以下的一项才会有效果,包括: 新的尺寸、位置、或者透明度设置.
用法示例:
// 水平地将元素滑到 x 位置 200,同时改变 height 以及 opacity
el.shift({ x: 200, height: 50, opacity: .8 });
// 设置默认值的常用配置选项.
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
});
包含任意Fx配置选项的字面量对象
元素本身
显示此元素 - 根据 display mode 来决定使用 "display" 还是 "visibility". 参见 setVisible.
this
Overrides: Ext.dom.AbstractElement.show
将元素滑动到视图中. 可以指定一个锚点用来设置滑动效果的起点. 如果需要,本方法将自动使用一个固定大小的容器来包装此元素. 参考 Fx 类查看合法的锚点选项. 用法如下:
// 默认效果: 从顶部滑入
el.slideIn();
// 自定义效果: 持续2秒,从右边滑入
el.slideIn('r', { duration: 2000 });
// 设置默认值的常用配置选项
el.slideIn('t', {
easing: 'easeOut',
duration: 500
});
(可选参数) 一个合法的 Fx 锚点位置 (默认是顶部top: 't')
(可选参数) 包含任意Fx配置选项的字面量对象
如果任意后代元素的 scrollTop 值需要保存,请设置为 true.
默认情况下由slideIn和slideOut执行的 DOM 的包装操作(wrapping operation) 将会导致浏览器丢失所有的滚动位置.
元素本身
译者注: 根据源码可知, slideOut 的实现调用的是slideIn, 仅仅加了一个标志位:slideOut在第三个参数位置上.(第三个参数是不对外开放的). 将元素平滑移出视图外. 可以指定一个锚点用来设置滑动效果的终点(end point). 当动画效果完成以后, 此元素将会被隐藏 (visibility = 'hidden'),但是 block 的元素将会继续占用文档中的位置. 如果需要从DOM中删除,则需要使用 'remove' 配置项. 如果需要,本方法将自动使用一个固定大小的容器来包装此元素. 参考 Fx 类查看合法的锚点选项. 用法如下:
// 默认效果: 从顶部滑出
el.slideOut();
// 自定义效果: 持续2秒,从右边滑出
el.slideOut('r', { duration: 2000 });
// 设置默认值的常用配置选项
el.slideOut('t', {
easing: 'easeOut',
duration: 500,
remove: false,
useDisplay: false
});
元素本书
获取从该对象被实例化的类的引用。 请注意不同于 self,
this.statics()是独立的作用域，无论this是否运行，总是返回其中的调用类。
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // 总是等于'Cat'，无论'this'是什么，
// 相当于：My.Cat.speciesName
alert(this.self.speciesName); // 依赖 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // 依赖 'this'
cloned.groupName = this.statics().speciesName; // 相当于: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', 然后提示 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
停止指定事件(数组/单个)的冒泡,并可选择是否阻止默认行为
要阻止冒泡的 单个event / 或者events数组
设置为 true 则阻止默认行为
this
当点击此元素时 进行闪烁(Blink) , 随后消逝在其中心 (类似于关闭一台老式的CRT电视机). 当动画效果完成后, 此元素将会被隐藏 (visibility = 'hidden'), 但是 block 的元素将会继续占用文档中的位置. 如果需要从DOM中删除,则需要使用 'remove' 配置项. 用法如下:
// 默认效果
el.switchOff();
// 全部设置默认值的配置选项
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
(可选参数) 包含任意Fx配置选项的字面量对象
配置扩展
从此元素移除一个事件处理器(event handler).
Note: 如果在 添加(adding) 监听器listener时明确指定了 执行范围 scope, 那么此处也必须指定同样的调用环境 scope.
使用示例:
el.un('click', this.handlerFn);
// 或者
el.removeListener('click', this.handlerFn);
要移除 handler 的事件名字.
要移除的事件处理函数.
The handler function to remove. 必须是在调用on 时添加的那个函数引用.
如果在 添加(adding) 监听器listener时明确指定了 执行范围 scope, 那么此处也必须指定同样的调用环境 scope.
this
隐藏先前应用的遮罩层.
Overrides: Ext.dom.AbstractElement.unmask
沿着DOM，向外围搜索外层的"父父"节点，搜索条件必须符合并匹配传入的简易选择符(简易选择符形如 div.some-class or span:first-child)。 这是对于findParentNode()的一个便捷方法，它总是返回Ext.Element类型的节点。
要进行测试的简易选择符
搜索深度，可以为数字或元素，其导致向上遍历停止， 并不考虑纳入作为结果。(默认是 50 || document.documentElement)
匹配的DOM节点(null的话表示没有找到匹配结果)
更新此元素的 innerHTML, 可配置是否查找并处理脚本scripts.
新的HTML
设置为true则查找并处理脚本scripts (默认值为 false)
当异步脚本script加载完成后的回调函数
this
Overrides: Ext.dom.AbstractElement.update
使用另一个元素创建并包装当前元素
用来包装元素的DomHelper元素配置对象，或者是一个空的div时，此值为null
设置为true时将返回原始的DOM元素而不是Ext.dom.AbstractElement
Defaults to: false
新创建的包装元素
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
成员
this
这个类的原型借用另一个类的成员
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如：
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
别名新方法的名称，或对象设置多个别名。 参见flexSetter
原来的方法名
检索Ext.dom.Element对象。Ext.get是Ext.dom.Element.get的别名。
此方法不会检索Components.此方法检索封装DOM元素的Ext.dom.Element 对象。若要检索组件按其ID，请使用Ext.ComponentManager.get。
使用简单的缓存来始终返回相同的对象。 自动修复如果一个对象通过AJAX或DOM被重新创建具有相同id。
节点的id，一个DOM节点或现有元素。
Element对象(或null，如果没有发现匹配的元素)
以字符串格式，获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
根据输入字符串或字符串数组返回一个唯一的类名称列表的数组
参数的个数是不限的。
示例
// 添加 x-invalid 和 x-mandatory 类，不要重复添加 myElement.dom.className = Ext.core.Element.mergeClsList(this.initialClasses, 'x-invalid x-mandatory');
一个类名称列表的字符串，或是一个类名称列表的数组。
一个类名称列表的字符串，或是一个类名称列表的数组。
一个字符串数组表示其他唯一的，合并的类名称列表。 如果将类名称添加到第一个列表，changed 属性将为true。
重写这个类的成员。通过callParent重写的方法可以调用。
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫！"
// alerts "I'm a cat!我是一只猫！"
// alerts "Meeeeoooowwww"
在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
以上完成了相同的结果，但可以由Ext.Loader重写， 其目标类和生成过程中，可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。
This method has been deprecated since 4.1.0
使用 Ext.define 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类
返回唯一的类名的数组deom， 包含所有类名称的第一个参数从第二个参数进行删除后得到的
示例
// 如果存在的话，删除 x-invalid 和 x-mandatory 类。 myElement.dom.className = Ext.core.Element.removeCls(this.initialClasses, 'x-invalid x-mandatory');
一个类名称列表的字符串，或是一个类名称列表的数组。
一个类名称列表的字符串，或是一个类名称列表的数组从existingClsList中删除。
一个字符串数组表示其他的类名称列表。如果类的名称被删除，changed属性将为true。
过滤元素基于的CSS选择器，使Element方法能够在一条语句中通过返回 CompositeElement或者CompositeElementLite对象被应用到很多相关的元素
如果支持此事件, 当一个元素 element 被激活时触发, 比如, 通过鼠标点击或者键盘按键.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当节点的某个属性被修改时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当字符数据(character data)被修改时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 则类似于 HTML focus 事件一样, 但可用于所有可获取焦点的元素.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 则类似于 HTML blur 事件一样, 但可用于所有可获取焦点的元素.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当一个节点被加入到另一个节点之中时触发
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当一个节点被插入到document文档之中时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当节点的某个子节点被移除时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当一个节点被从document文档之中移除时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
如果支持此事件, 当 subtree 被改变后触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当一个 object插件/image 在加载完成以前被中止时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当某个元素失去输入聚焦时触发,不论是通过鼠标还是通过 tab 键导航到的.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当输入域(control)失去焦点以后,并且其值与获得焦点时相比发生改变 则触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到鼠标click时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到鼠标双击时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当一个 object插件/image/frame 不能正确加载时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当某个元素获得输入聚焦时触发,不论是通过鼠标还是通过 tab 键导航到的.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到键盘按键按下(keydown)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到键盘按键(keypress)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到键盘按键放开(keyup)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当浏览器(user agent)加载完成此元素内所有的内容后触发. 只支持 window, frames, objects插件 以及 images.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到鼠标键被按下时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当 mouseenter(鼠标移入)元素时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当 mouseleave(鼠标离开)元素时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素上检测到 mousemove(鼠标移动)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素上检测到 mouseout(鼠标移出)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素上检测到 mouseover(鼠标滑过,进入)时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当在元素内检测到鼠标键放开时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当表单重置时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当一个 文档视图(document view)改变大小时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当一个 文档视图(document view)发生滚动时(scrolled)触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当用户在文本输入域中选择一部分文本时触发, 包括 input 和 textarea.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当表单提交时触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.
当浏览器(user agent)从window 或者 frame 移除所有内容后触发. 对于elements来说,只有target元素和/或 所有的内容被移除后才触发.
封装了 DOM 事件的 Ext.EventObject 对象.
事件发生的元素(target).
The options object passed to Ext.util.Observable.addListener.