ExtJs 学习札记 Ext.DomHelper 学习 收藏

类说明： DomHelper 这个类对普通的DOM 或者HTML 片段封装了一些常用的方法，特别创建HTML fragment templates

?

--------------------------------------------

DomHelper 规定的对象格式： 这个对象格式用来创建DOM 元素，对象的属性相当于普通DOM 元素的属性，如下所示：

tag : 要创建的元素名称
children : 或者是 cn ，此层的孩子结点，孩子的数据格式和上层是一样的
cls : 定义元素的class 属性
html : 此元素的innerHTML

--------------------------------------------

此类的定义的方法：

append :
insertBefore :
insertAfter :
overwrite :
createTemplate :
insertHtml :

示例1 ：

var dh = Ext.DomHelper; // create shorthand alias??
// specification object??
var spec = {??
??? id: 'my-ul',??
??? tag: 'ul',??
??? cls: 'my-list',??
??? // append children after creating??
??? children: [???? // may also specify 'cn' instead of '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', // the context element 'my-div' can either be the id or the actual node??
??? spec????? // the specification object??
)?
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
??? id: 'my-ul',
??? tag: 'ul',
??? cls: 'my-list',
??? // append children after creating
??? children: [???? // may also specify 'cn' instead of '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', // the context element 'my-div' can either be the id or the actual node
??? spec????? // the specification object
)

原来的页面html 代码:

<div id="my-div"></div>?
<div id="my-div"></div>

运行上述代码之后：

?

?

示例2 ：模板方法

?????? 1. 用规定的格式创建模板方法，用顺序号代替参数

// 创建一个ul ，添加到id 为my-div 的div里??
?var list = dh.append('my-div', {tag: 'ul', cls: my-list'});??
// 创建一个生成 li 的模板??
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}',html: 'List Item {0}'});??
for(var i = 0; i < 5; i++){??
??? tpl.append(list, [i]); // 利用前面创建的模板生成li 结点??
}?
// 创建一个ul ，添加到id 为my-div 的div里
?var list = dh.append('my-div', {tag: 'ul', cls: my-list'});
// 创建一个生成 li 的模板
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}',html: 'List Item {0}'});
for(var i = 0; i < 5; i++){
??? tpl.append(list, [i]); // 利用前面创建的模板生成li 结点
}

原来的html 代码：

<div id="my-div"></div>?
<div id="my-div"></div>

运行上述代码之后：

?

? 2.用字符串的形式创建模板方法， 用顺序号代替参数

var html = '<a id="{0}" href="{1}" mce_href="{1}" class="nav">{2}</a>';//创建超链接字符串??
??????????? var tpl = new Ext.DomHelper.createTemplate(html);//创建模板??
??????????? //向模板中插入参数，创建超链接，并加入到id 为 blog-roll 的div 中??
??????????? tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);??
??????????? tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);?
var html = '<a id="{0}" href="{1}" mce_href="{1}" class="nav">{2}</a>';//创建超链接字符串
??????????? var tpl = new Ext.DomHelper.createTemplate(html);//创建模板
??????????? //向模板中插入参数，创建超链接，并加入到id 为 blog-roll 的div 中
??????????? tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
??????????? tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);

原来的html 代码：

<div id="blog-roll"></div>?
<div id="blog-roll"></div>

运行上述代码之后：

?

3.用字符串的形式创建模板方法，?? 指定 key

?? 以下代码和 2 中代码运行的效果是一样的。

?? var html = '<a id="{id}" href="{url}" mce_href="{url}" class="nav">{text}</a>';//创建超链接字符串??
??????????? var tpl = new Ext.DomHelper.createTemplate(html);//创建模板??
??????????? //向模板中插入参数，创建超链接，并加入到id 为 blog-roll 的div 中??
??????????? tpl.append('blog-roll', {??
??????????????? id: 'link1',??
??????????????? url: 'http://www.jackslocum.com/',??
??????????????? text: "Jack's Site"?
??????????? });??
??????????? tpl.append('blog-roll', {??
??????????????? id: 'link2',??
??????????????? url: 'http://www.dustindiaz.com/',??
??????????????? text: "Dustin's Site"?
??????????? });?
var html = '<a id="{id}" href="{url}" mce_href="{url}" class="nav">{text}</a>';//创建超链接字符串
??????????? var tpl = new Ext.DomHelper.createTemplate(html);//创建模板
??????????? //向模板中插入参数，创建超链接，并加入到id 为 blog-roll 的div 中
??????????? tpl.append('blog-roll', {
??????????????? id: 'link1',
??????????????? url: 'http://www.jackslocum.com/',
??????????????? text: "Jack's Site"
??????????? });
??????????? tpl.append('blog-roll', {
??????????????? id: 'link2',
??????????????? url: 'http://www.dustindiaz.com/',
??????????????? text: "Dustin's Site"
??????????? });

示例3：其他方法

??? 1. insertHtml

????? var dh = Ext.DomHelper;???
?????? dh.insertHtml('beforeBegin',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.csdn.net</a>');?
var dh = Ext.DomHelper;
?????? dh.insertHtml('beforeBegin',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.csdn.net</a>');

????? 上述代码运行效果

??????

??? var dh = Ext.DomHelper;???
?????? dh.insertHtml('AfterEnd',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.csdn.net</a>');?
var dh = Ext.DomHelper;
?????? dh.insertHtml('AfterEnd',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.csdn.net</a>');

??? 上述代码运行效果：

?????

???? var dh = Ext.DomHelper;??
?????? //id为 blog-roll 插入到第一个子节点位置??
?????? dh.insertHtml('AfterBegin',Ext.getDom("blog-roll"),'<a id="AfterBegin">www.csdn.net</a>');?
var dh = Ext.DomHelper;
?????? //id为 blog-roll 插入到第一个子节点位置
?????? dh.insertHtml('AfterBegin',Ext.getDom("blog-roll"),'<a id="AfterBegin">www.csdn.net</a>');

???? 上述代码运行效果：

?????

???? var dh = Ext.DomHelper;??
?????? //id为 blog-roll 插入到最后一个子节点位置??
?????? dh.insertHtml('BeforeEnd',Ext.getDom("blog-roll"),'<a id="BeforeEnd">www.csdn.net</a>');?
var dh = Ext.DomHelper;
?????? //id为 blog-roll 插入到最后一个子节点位置
?????? dh.insertHtml('BeforeEnd',Ext.getDom("blog-roll"),'<a id="BeforeEnd">www.csdn.net</a>');

???? 上述代码运行效果：

?????

?

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lijingronghcit/archive/2010/09/01/5854480.aspx