- 浏览: 421813 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 1348今天闲着没事,打算要 ... -
Ext源码分析:解析Ext的命名空间,Ext.namespace
2012-04-11 17:07 1028初学者一定对Ext大量的命名空间感到不解,其实是非常简单的东西 ... -
Ext js Ajax异步请求超时统一全局设置
2012-02-16 20:18 1919Ext js AJAX异步请求超时统一全局设置: 修 ... -
Ext grid 文本位置设置方式
2011-07-28 16:37 1297我所知道Ext grid 文本位置设置方式主要有两种: (1 ... -
Panel上放两个ToolBar两行显示
2011-07-06 10:30 2810一个panel只能有一个tbar,有时我们tbar上的内容很多 ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2011-07-06 10:27 745http://www.iteye.com/topic/4473 ... -
EXT的combo没那个下拉的箭头
2011-07-05 15:56 829EXT的combo没那个下拉的箭头的原因可能是 设置了rea ... -
Ext grid 隐藏纵向滚动条 Ext Grid 最后一列怎么隐藏?就是滚动条会出现的那列
2011-06-18 16:28 2230配置前: 配置: autoHeight : true, ... -
设置Ext Grid 表头及背面背景色
2011-06-15 14:42 4073设置Ext Grid 表头及背面背景色 moneFundsD ... -
Ext Grid高度
2011-06-15 12:48 921设置Ext Grid的样式为: style : { ... -
设置ext grid字体样式
2011-06-13 17:26 2112改变Ext Grid字体样式: (1)声明Cloumn渲染器 ... -
EXT CExt.form.ComboBox选择一次后只剩一个选项
2011-05-30 15:26 1585EXT CExt.form.ComboBox选择一次后只剩一个 ... -
仔仔细细分析Ext》 第一章 必须理解Ext.extend函数
2011-05-07 17:38 1112强烈声明:转自:http://hi.baidu.com/ihc ... -
Ext.form.TextField 的隐藏
2009-12-15 20:48 1660终于会隐藏Ext.form.TextField 了 ... -
动态改变JsonStore的Url
2009-12-14 20:34 2446费了不少周折终于能动态改变JsonStore的Url了! ... -
Ext之扩展Ext.ux.form.LovCombo使用
2009-12-05 15:42 6449最近学习使用Ext做些东西,有时候找到现成的,但却不知 ...
相关推荐
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 ...27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
通过本篇学习笔记,我们可以了解到如何使用ExtJs的面板控件,并通过一些简单的例子来展示它们的基本用法。这些基础知识是构建复杂ExtJs应用程序的基石。学习和掌握Ext.Panel、Ext.TabPanel和Ext.Viewport的使用方法...
总的来说,ExtJS 4.0中对RowEditing插件的重构旨在提供更高效、易用且可靠的表格数据编辑功能,同时通过源码分析和文档学习,开发者可以更好地利用这个插件来提升其应用程序的用户体验。尽管具体的改进内容需要通过...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...
### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...
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 ...
在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...
ExtJS是一个广泛使用的JavaScript库,...通过深入学习和理解这些内容,开发者能够熟练掌握ExtJS 3.3,编写出高效、高质量的Web应用。同时,文档中的示例代码也有助于开发者快速上手实践,将理论知识转化为实际技能。
在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...
在3.4.0版本中,`ext.jsb2` 文件是一个关键组成部分,它对于理解和开发基于ExtJS的应用程序至关重要。这个文件的缺失可能会对升级到4.0.0版本的开发者造成困扰,因为4.0.0版本不再包含这个文件,但幸运的是,它可以...
在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...
在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....
开发者可以通过EXT的API文档学习如何配置和使用UploadDialog,包括添加按钮、监听事件、设置参数等。对于初次接触EXTjs UploadDialog的开发者来说,理解EXT的组件体系结构、事件模型和配置选项是非常重要的。 通过...
### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...