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 ：

1. var dh = Ext.DomHelper; // create shorthand alias  
2. // specification object  
3. var spec = {  
4.     id: 'my-ul',  
5.     tag: 'ul',  
6.     cls: 'my-list',  
7.     // append children after creating  
8.     children: [     // may also specify 'cn' instead of 'children'  
9.         {tag: 'li', id: 'item0', html: 'List Item 0'},  
10.         {tag: 'li', id: 'item1', html: 'List Item 1'},  
11.         {tag: 'li', id: 'item2', html: 'List Item 2'}  
12.     ]  
13. };  
14. var list = dh.append(  
15.     'my-div', // the context element 'my-div' can either be the id or the actual node  
16.     spec      // the specification object  
17. )  

原来的页面html 代码:

1. <div id="my-div"></div>  

运行上述代码之后：

 

 

示例2 ：模板方法

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

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

原来的html 代码：

1. <div id="my-div"></div>  

运行上述代码之后：

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

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

原来的html 代码：

1. <div id="blog-roll"></div>  

运行上述代码之后：

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

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

  

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

示例3：其他方法

    1. insertHtml

     

1. var dh = Ext.DomHelper;   
2.        dh.insertHtml('beforeBegin',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.youkuaiyun.com</a>');  

      上述代码运行效果

       

   

1. var dh = Ext.DomHelper;   
2.        dh.insertHtml('AfterEnd',Ext.getDom("blog-roll"),'<a id="beforeBegin">www.youkuaiyun.com</a>');  

    上述代码运行效果：

     

 

    

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

     上述代码运行效果：

     

    

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

     上述代码运行效果：