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