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 )

原来的页面html 代码:

<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 结点 }

原来的html 代码：

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

原来的html 代码：

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

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

     上述代码运行效果：