ExtJs 学习笔记 Ext.DomHelper 学习
来源:互联网 发布:苹果windows双系统安装 编辑:程序博客网 时间:2024/05/29 05:53
类说明: 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>');
上述代码运行效果:
- ExtJs 学习笔记 Ext.DomHelper 学习
- ExtJs 学习笔记 Ext.DomHelper 学习
- extJs 2.0学习笔记(DomHelper.js篇)
- extJs 2.0学习笔记(DomHelper.js篇)
- ExtJS学习----------Ext.DomHelper类学习(实例)
- 引用 extJs 2.0学习笔记(DomHelper.js篇)
- ExtJS学习笔记 Ext.FormPanel
- extjs学习笔记----Ext.onReady
- Extjs 基础篇—— Ext.DomHelper
- extJs 2.1学习笔记(Ext.TabPanel篇)
- extJs 2.1学习笔记(Ext.form概述)
- extJs 2.1学习笔记(Ext.TabPanel篇)
- extJs 2.1学习笔记(Ext.TabPanel篇)
- extJs 2.0学习笔记(ext.js篇)
- extJs 2.0学习笔记-------Ext.Panel
- extjs学习笔记----Ext.util.Format
- EXTJS 窗口Ext.Window()学习笔记
- Extjs学习 Ext.Panel
- 12864液晶——读写、划点、划线、汉字、32*16的字符
- linux 配置path
- 一步一步 下载androdi for CyanogenMod源代码 图文教程。
- WebLogic v9.2 EJB和JNDI Demo
- 在头文件中使用static定义变量意味着什么
- ExtJs 学习笔记 Ext.DomHelper 学习
- 让iframe根据内容自动调整高度~~~
- const内存分配
- 从 Remote Service Binding 学习 AIDL 与 IPC
- UDP协议疑难杂症全景解析
- Java中==和equals的区别
- 软考查漏补缺---1
- 软件测试计划模板
- IPC框架分析 Binder,Service,Service manager