`

Ext Template Domhelper使用

阅读更多
引用

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

分享到:
评论

相关推荐

    ext核心api详解(2)

    EXT 核心 API 详解(四) - Ext.DomQuery/DomHelper/Template EXT JS 是一个专注于构建前端用户界面的JavaScript框架,它独立于后台技术,主要利用Ajax技术实现丰富的交互效果。本文将深入探讨EXT JS的核心API,特别...

    Ext API详解--笔记

    `EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt`涵盖了查询DOM元素的`Ext.DomQuery`(类似于jQuery的selector),动态创建和操作DOM的`DomHelper`,以及用于数据绑定的`Template`类。这些工具使你能更加...

    EXT核心API详解(第一部分)

    5. **EXT核心API详解(三)-Ext.DomQuery DomHelper Template**:这部分主要涉及DOM查询、DOM辅助器和模板。`Ext.DomQuery`(简称`$`)类似于jQuery的`select`,用于高效地选取DOM节点,支持XPath和CSS选择器。`Ext....

    整理的Ext API详解

    "EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery,这是一个高效的DOM选择器引擎,类似于jQuery的$.selector。DomHelper则是用于创建和操作DOM结构的工具,而Template则是用于动态生成...

    extapi

    "EXT核心API详解(四)-Ext.DomQuery DomHelper Template.txt"介绍了Ext.DomQuery,这是一个强大的CSS选择器引擎,类似于jQuery的选择器,用于高效地选取DOM元素。DomHelper则是一个便捷的DOM元素构建工具,可以生成...

    EXT教程EXT用大量的实例演示Ext实例

    Ext的基础知识点包括元素获取方法Ext.get、动态生成HTML的DomHelper和Template、以及数据处理相关的Ext.data命名空间中的proxy和reader系列。Ext对JSON格式的支持也很到位,提供了方便的API来加载和解析JSON数据。 ...

    Ext 开发指南 学习资料

    8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 8.3.3. 醍醐灌顶,功能强劲的模板引擎XTemplate。 8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. ...

    EXT2.0中文教程

    8.3. DomHelper和Template动态生成html 8.3.1. DomHelper用来生成小片段 8.3.2. 批量生成还是需要Template模板 8.4. Ext.data命名空间 8.4.1. proxy系列 8.4.1.1. 人畜无害的MemoryProxy 8.4.1.2. 常规武器HttpProxy...

    EXT核心API详解.doc

    9. **Ext.DomHelper类**:用于创建和修改DOM元素的工具类,提供了更简洁的API。 10. **Ext.Template类**:模板类,可以用来生成动态HTML内容。 11. **Ext.EventManager类**:事件管理类,负责事件的监听和分发。 ...

    Ext深入浅出 数据传输

    11.9 使用Ext.util.CSS管理CSS样式..... 290 11.10 使用Ext.util.ClickRepeater 处理点击事件...................................... 291 11.11 使用Ext.util.DelayedTask 延时执行函数..............................

    ExtJS入门教程(超级详细)

    9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...

    Extjs-常用函数和事件

    **Ext.DomHelper** 提供了一系列方法来操作DOM,如创建、插入、更新等,使得DOM操作更加便捷: 11. **append**: 在指定元素后面添加HTML元素或文本。 12. **applyStyles**: 应用CSS样式到指定元素。 13. **create...

    掏钱学Ext(完整版) 附全部源码

    3.6. 下一步使用jsp作为后台,让咱们看看实际怎么用程序判断,来返回特定节点的子节点。 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个...

    精通JS脚本之ExtJS框架.part1.rar

    6.5.1 Ext.Template 6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2...

    EXTJS___API详解

    9. **Ext.DomHelper 类**:用于动态创建和修改DOM元素,提供了一种模板化的创建方式。 10. **Ext.Template 类**:模板引擎,用于动态生成HTML片段。 11. **Ext.EventManager 类**:管理DOM事件,包括事件绑定、...

Global site tag (gtag.js) - Google Analytics