- 浏览: 408712 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (318)
- js (20)
- JQuery (2)
- Java (46)
- Oracle (4)
- mysql (21)
- ExtJs (17)
- Excel (2)
- Linux (8)
- Sql (8)
- Jsp (2)
- hibernate (12)
- jbpm (17)
- eclipse (8)
- 名博收藏 (1)
- Junit (2)
- 应用集成 (3)
- web (10)
- jboss (3)
- Rest (3)
- 其它 (7)
- 磁盘分区管理 (1)
- spring (18)
- SSO (4)
- tomcat (4)
- CSS (7)
- MemCached (6)
- EhCache (4)
- weblogic (1)
- apache (6)
- Exception design (1)
- db (1)
- 分析模式 (1)
- jstl (1)
- jsf (0)
- firefox (2)
- MongoDB (4)
- androidpn (1)
- hadoop (1)
- cvs (1)
- 微信公众号 (2)
- 高并发 (4)
- 技术论坛 (1)
- CDN (1)
- JVM (16)
- 加密 (4)
- maven (2)
- jenkins (1)
- hessian (1)
- 大数据处理 (2)
- NIO (0)
- netty (1)
- redis (1)
- git (1)
- Elastic Job (0)
最新评论
-
zgw06629:
或者<pre>aaaabbbbcccc</p ...
javaDoc注释换行 -
ddnzero:
...
StringBuffer换行 -
maosijun:
。。。。
EXT CExt.form.ComboBox选择一次后只剩一个选项 -
ysa198584:
你这有问题,当我的代码出现User.class的时候,反编绎的 ...
java的class文件批量反编译 -
dongj0325:
看到您的博客,很受启发,但还有关于jbpm4.4 timer使 ...
JBPM定时器(Timer)之Repeat属性不能使用变量
类说明: 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
发表评论
-
Extjs组件的生命周期
2012-04-13 14:41 1301今天闲着没事,打算要 ... -
Ext源码分析:解析Ext的命名空间,Ext.namespace
2012-04-11 17:07 967初学者一定对Ext大量的命名空间感到不解,其实是非常简单的东西 ... -
Ext js Ajax异步请求超时统一全局设置
2012-02-16 20:18 1882Ext js AJAX异步请求超时统一全局设置: 修 ... -
Ext grid 文本位置设置方式
2011-07-28 16:37 1269我所知道Ext grid 文本位置设置方式主要有两种: (1 ... -
Panel上放两个ToolBar两行显示
2011-07-06 10:30 2772一个panel只能有一个tbar,有时我们tbar上的内容很多 ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2011-07-06 10:27 719http://www.iteye.com/topic/4473 ... -
EXT的combo没那个下拉的箭头
2011-07-05 15:56 794EXT的combo没那个下拉的箭头的原因可能是 设置了rea ... -
Ext grid 隐藏纵向滚动条 Ext Grid 最后一列怎么隐藏?就是滚动条会出现的那列
2011-06-18 16:28 2184配置前: 配置: autoHeight : true, ... -
设置Ext Grid 表头及背面背景色
2011-06-15 14:42 4025设置Ext Grid 表头及背面背景色 moneFundsD ... -
Ext Grid高度
2011-06-15 12:48 888设置Ext Grid的样式为: style : { ... -
设置ext grid字体样式
2011-06-13 17:26 2076改变Ext Grid字体样式: (1)声明Cloumn渲染器 ... -
EXT CExt.form.ComboBox选择一次后只剩一个选项
2011-05-30 15:26 1516EXT CExt.form.ComboBox选择一次后只剩一个 ... -
仔仔细细分析Ext》 第一章 必须理解Ext.extend函数
2011-05-07 17:38 1071强烈声明:转自:http://hi.baidu.com/ihc ... -
Ext.form.TextField 的隐藏
2009-12-15 20:48 1594终于会隐藏Ext.form.TextField 了 ... -
动态改变JsonStore的Url
2009-12-14 20:34 2362费了不少周折终于能动态改变JsonStore的Url了! ... -
Ext之扩展Ext.ux.form.LovCombo使用
2009-12-05 15:42 6416最近学习使用Ext做些东西,有时候找到现成的,但却不知 ...
相关推荐
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 ...27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
extJs 2.1学习笔记 此资料收集于网上.. 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 ...27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
ExtJs 学习笔记基础篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
NULL 博文链接:https://atian25.iteye.com/blog/1019910
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
一、ExtJs中的Ajax:Ext.Ajax.request 23 二、元素对象Ajax式更新:Ext.Updater,[已弃用] 29 第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
Extjs4.0学习笔记大全.pdf,供大家学习
ExtJS tooltip功能组件实例
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
EXTjs的上传组件