ExtJs 學習筆記 Ext.DomHelper 學習

類說明： DomHelper 這個類對普通的DOM 或者HTML 片段封裝了一些常用的方法，特別創建HTML fragment templates

DomHelper 規定的對象格式： 這個對象格式用來創建DOM 元素，對象的屬性相當於普通DOM 元素的屬性，如下所示：

此類的定義的方法：

示例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
)

原來的頁面html 代碼:

運行上述代碼之後：

示例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 結點
}

原來的html 代碼：

運行上述代碼之後：

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"]);

原來的html 代碼：

運行上述代碼之後：

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"
});

示例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('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('BeforeEnd',Ext.getDom("blog-roll"),'<a id="BeforeEnd">www.csdn.net</a>');

上述代碼運行效果：