Ext.core.DomHelper用法

最新推荐文章于 2018-01-16 23:50:00 发布

a138571

最新推荐文章于 2018-01-16 23:50:00 发布

阅读量142

点赞数

分类专栏： Extjs4.0 文章标签： domhelper ext

本文链接：https://blog.csdn.net/a138571/article/details/84077575

版权

Extjs4.0 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

DomHelper 规定的对象格式：这个对象格式用来创建DOM 元素，对象的属性相当于普通DOM 元素的属性，如下所示：
tag:要创建元素的名称 children（cn）:此层的孩子结点，孩子的数据格式和上层是一样的 cls:定义元素的class属性 html:此元素的innerHTML
方法：append、insertBefore、insertAfter、overwrite、create Template、insertHtml

示例1:


var dh = Ext.core.DomHelper;
var spec = {
    id:'my-ul',
    tag:'ul',
    cls:'my-list',
    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'
    },{
       tag:'li',id:'item3',html:'List item 3'
    }]

};
var list = dh.append('my-div',spec);


<div id='my-div'></div>

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


//创建一个ul，添加到id为my-div的div里
var dh = Ext.core.DomHelper ;
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++){
   tp1.append(list,[i]);
}

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


var html ='<a id="{0}" href="{1}" class="nav">{2}</a>' ;//创建超链接字符串
var tpl = Ext.core.DomHelper.createTemplate(html);//创建模板
//向模板中插入参数，创建超链接，并加入到id 为 site 的div 中
tp1.append("site",['link1','www.baidu.com','baidu']);
tp1.append("site",['link2','http://zhouyihui2010.iteye.com','iteye']);


<div id="site"></div>

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


var html ='<a id="{id}" href="{url}" class="nav">{text}</a>' ;//创建超链接字符串
var tpl = Ext.core.DomHelper.createTemplate(html);//创建模板
//向模板中插入参数，创建超链接，并加入到id 为 site 的div 中
tp1.append(
   id:'site',
   url:'www.baidu.com',
   text:'baidu'
);
tp1.append(
   id:'site',
   url:'http://zhouyihui2010.iteye.com',
   text:'iteye'
);


<div id="site"></div>

示例3：
1.insertHtml


var dh = Ext.core.DomHelper ;
dh.insertHtml('beforeBegin',Ext.getDom("site"),'<a id="beforeBegin">http://zhouyihui2010.iteye.com</a>');

dh.insertHtml('AfterEnd',Ext.getDom("site"),'<a id="beforeBegin">www.csdn.net</a>'); 

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

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