Ext Template Domhelper使用

最新推荐文章于 2016-01-25 22:35:29 发布

iteye_7988

最新推荐文章于 2016-01-25 22:35:29 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

分类专栏： EXT积累空间文章标签： EXT Blog HTML

本文链接：https://blog.youkuaiyun.com/iteye_7988/article/details/81928465

EXT积累空间专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用Ext DomHelper及其createTemplate方法来高效创建和操作DOM元素，包括使用模板快速生成带有特定属性的HTML节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[quote]


var menuEditTemplate = new Ext.Template(   
            '<a href="#"><img border="0" src="{imgsrc}"></a>'  
        );         
        menuEditTemplate.compile();   
var result = menuEditTemplate.apply(   
                    {imgsrc:'resources/images/icon/16/application_form_edit.png'}   
            );   


var dh=Ext.DomHelper;              
// create the node   
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});   
// get template   
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});   
for(var i = 0; i < 5, i++){       
     tpl.append(list, [i]);    
// use template to append to the actual node   
   }  

<div id="blog-roll"></div>
	<script type="text/javascript">
	//例子一：
	<!--	
		var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
		var tpl = new Ext.DomHelper.createTemplate(html);
		tpl.append('blog-roll',{
								id: 'link1',
								url: 'http://z-jianwen.iteye.com/admin/blogs/765729',
								text: "Jack's Site"}
								);
		tpl.append('blog-roll', {
								id: 'link2',
								url: 'http://www.dustindiaz.com/',
								text: "Dustin's Site"}
								);
	-->

[/quote]