Alternate names
Ext.DomHelperExt.core.DomHelperHierarchy
Ext.BaseExt.dom.AbstractHelperExt.dom.HelperFiles
DomHelper 类提供了一个抽象层，并且明显支持通过DOM创建元素或使用HTML片段. 它也有从您的DOM构建代码中创建HTML片段模板的能力.
在创建元素时用到的规范对象. 此对象的属性被认为是元素属性， 除了以下4种特殊属性:
NOTE: 对于其他任意的属性，该值目前在构建元素的HTML字符串前，不会 自动进行HTML转义. 这意味着如果你的属性值中包含特殊字符通常不会被双引号的属性值所允许， 所以你必须事先手动对其进行HTML编码(参考Ext.String.htmlEncode)， 或者冒着生成畸形的HTML的风险. 这种行为方式在未来将有所改变.
一般使用到的插入方法:
这就是个例子， 有个带3个子项的无序序列要追加到已经存在的id为‘my-div’的元素后:
var dh = Ext.DomHelper; // 创建一个速记别名
// 规范对象
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
// 创建后追加其孩子
children: [ // 也可以指定用'cn'代替'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
'my-div', // 上下文元素'my-div'可以是id，也可以是实际节点
spec // 规范对象
);
在该类中元素创建的规格参数也可以被传递为规格对象数组. 可以有效的被用于插入多个同级节点现有容器. 例如，给上例插入多个列表项:
dh.append('my-ul', [
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);
真正的权力是在于内置的模板. 取代创建或添加任何元素的是返回一个模板对象createTemplate，可反复用于插入新元素. 重温上例，我们这次可以利用模板:
// 创建节点
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// 获取模板
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i < 5, i++){
tpl.append(list, [i]); // 使用模板附加到实际的节点
}
使用模板的另一个例子:
var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
相同的例子使用命名参数的方式:
var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.edspencer.net/',
text: "Ed's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
模板是使用正则表达式方式. 其效果是显著的， 但是你若要用同一个模板添加一堆的DOM元素，还可以通过模板的"compiling"功能来进一步. "compile()"方式的工作原理是在模板被解析并且打破了不同的变量点， 然后创建输出一个动态函数. 生成的函数执行方式是将这些零部件和传递的变量通过字符串连接起来， 而不是用正则表达式的方式.
var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();
//... 然后在按正常方式使用模板
DomHelper可以明显的创建HTML的片段. 使用HTML片段替代DOM可以显著的提高性能.
元素创建的规格参数也可以是字符串. 若useDom为false,则本字符串就可以作为innerHTML. 若If useDom 为 true, 一个字符串的规格参数在结果中会被创建为一个文本节点. 用法:
Ext.DomHelper.useDom = true; // 强制它使用DOM ;降低性能
扩展事件
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'
成员
创建新的DOM节点并附加到el后。
上下文元素
DOM对象或原始HTML块
true时返回Ext.Element
新节点
调用原来的方法，这是以前的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)
返回调用父类的方法的结果。
把样式从给定的对象转变成文本。 样式是CSS样式名及其结合值。
该方法的基本形式返回一个字符串：
var s = Ext.DomHelper.generateStyles({
backgroundColor: 'red'
});
// s = 'background-color:red;'
或者，该方法能向输出数组添加。
var buf = [];
...
Ext.DomHelper.generateStyles({
backgroundColor: 'red'
}, buf);
这样的话，样式文本被进栈到数组并返回该数组。
这个类的初始化配置。典型例子:
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 混入原型 键-值对
创建新的DOM节点并插入到el后。
上下文元素
DOM对象
true时返回Ext.Element
新节点
创建新的DOM节点并插入到el前。
上下文元素
DOM对象或原始HTML块
true时返回Ext.Element
新节点
创建新的DOM节点并作为le的第一个子节点。
上下文元素
DOM对象或原始HTML块
true时返回Ext.Element
新节点
向DOM插入HTML片段。
html插入元素的位置 - beforeBegin, afterBegin, beforeEnd, afterEnd。
例如下面的HTML：<div>Contents</div>
使用不同的where值插入到元素的如下位置：
<HERE><div>Contents</div><div><HERE>Contents</div><div>Contents<HERE></div><div>Contents</div><HERE>上下文元素
HTML片段
新节点
创建新的DOM元素，并覆盖el上下文的内容.
上下文元素
DOM 对象的规格（以及其孩子）或原始的HTML文件
设为true则返回一个Ext.Element
新节点
Overrides: Ext.dom.AbstractHelper.overwrite
获取从该对象被实例化的类的引用。 请注意不同于 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
配置扩展