一、简介
元素操作通常是指标签的创建、定位、删除和样式定义等。
模板是Extjs中一个非常重要的基础功能,因为需要生成大量的HTML标签,使用模板绝对是不二的最佳选择,能带来非常棒的可读性。
二、Ext.DomHelper 类
Ext.DomHelper 类帮助我们使用javascript 清晰地生成HTML代码,他的使用非常灵活,我们应该找准他的主线,像庖丁解牛一样再慢慢剖开。
任何复杂的东西都有他存在的根基,根基就是精髓、是重心。过于浮躁搞不出什么深度,也容易让人丧失自信,掌握一套适合自己的学习方法非常必要,在学习中不断沉淀,完善自我——不仅仅是搞技术,其实任何事情都一样。只要付出了百分之一百的努力,就算没有成功也不会后悔。
1、insertHtml ( String where, HTMLElement el, String html ):在指定的元素上插件HTML片段。
参数:
where:插到哪里?可选值有:beforeBegin, afterBegin, beforeEnd, afterEnd
el:参照元素
html:插件的内容
示例:在页面上定义如下div:<div id="e">这是一个层</div>
Ext.DomHelper.insertHtml("afterBegin", Ext.get("e").dom, "<div> 中华人民共和国</div>")
在页面上生成的结果如下:
<div id="e"> <div>中华人民共和国</div> 这是一个层 </div>
通过修改第一个参数的值,可以总结出四个可选值的含义:
beforeBegin:插入起始标签之前
afterBegin:插入到起始标签之后,本示例就是这种情况
beforeEnd:插入到结束标签之前
afterEnd:插入到结束标签之后
2、下面的方法都差不多,我们通过一个示例来说明他们的用法。
insertBefore ( */ , Object/String o):新节点插入到指定节点之前;
insertAfter ( */ , Object/String o):新节点插入到指定节点之后;
insertFirst ( */ , Object/String o):新建节点并插入到指定节点作为第一个子节点;
append(*/ , Object/String o):新建节点并插入到指定节点作为最后一个子节点;
overwrite ( */ , Object/String o):替代指定节点内容;
参数:
*/:指定节点,类型可以为String/HTMLElement/Element
o:新节点,可以是dom对象(子孙)或裸HTML标记
示例:
HTML代码如下:
<div id="parent"> <div id="c1">第1 个孩子</div> <div id="c2">第2 个孩子</div> <div id="c3">第3 个孩子</div> <div id="c4">第4 个孩子</div> <div id="c5">第5 个孩子</div> </div>
JS代码如下:
//在c2 之前插入div Ext.DomHelper.insertBefore("c2", "<div>c2-child-2</div>"); //在c2 之后插入div Ext.DomHelper.insertAfter("c2", {tag: "div", html: "c2-child"}); //将一个新节点作为parent的第一个子节点 Ext.DomHelper.insertFirst("parent", "<div>parent-first-child</div>"); //将c3 的内容更新 Ext.DomHelper.overwrite("c3", "There are new contents"); //将一个新节点作为parent的最后一个子节点 Ext.DomHelper.append("parent", {tag: "div", html: "parent-last-child"});
结果:
<div id="parent"> <div>parent-first-child</div> <div id="c1">第1 个孩子</div> <div>c2-child-2</div> <div id="c2">第2 个孩子</div> <div>c2-child</div> <div id="c3">There are new contents</div> <div id="c4">第4 个孩子</div> <div id="c5">第5 个孩子</div> <div>parent-last-child</div> </div>
从例子中可以看出,新建的节点可以指定多种类型:即可以是一段HTML 标记,也可以是一个json对象,对于后者,可以通过cls属性来指定类选择器。
三、Ext.XTemplate类
Templete 是模板之意,就是定义一段HTML 代码,并放置若干个{}作为占位符,运行时将数据填充到{}中去。
XTemplate和DomHelper 有很深的渊源,DomHelper 是XTemplate的小弟,DomHelper解决不了的事情,XTemplate一定可以。
使用XTemplate一般会经历三个步骤:
1、定义XTemplate对象,指定一段HTML代码作为模板;
2、指定XTemplate中定义的HTML应该放置的位置,并填充占位符信息;
3、编译XTemplate。
先看一个简单的例子来说明问题:
Ext.onReady(function(){ var xt = new Ext.XTemplate( "<table border={0} width={1}>", "<tr>", "<td>{2}</td>", "<td>{3}</td>", "<td>{4}</td>", "</tr>", "</table>" ); xt.append("xt", [1, 300, '单元格1', '单元格2', '单元格3']); xt.compile(); })
页面如下:
<div id="xt"></div>
实例化XTemplate时,可以配置任意个参数,会自动连接到一起,这种写法似乎更方便更好读。append 方法同DomHelper 的append 方法,实际上还有insertBefore、insertAfter、insertFirst、overwrite 等方法,不同的是第二个参数,该参数是要填充到占位符中的数据,可以是数组,也可以是json对象。执行完之后得到如下结果:
<div id="xt"> <table border="1" width="300"> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </tbody> </table> </div>
下面是改造后的例子,填充数据时用json对象代替了原来的数组:
Ext.onReady(function(){ var xt = new Ext.XTemplate( "<table border={b} width={w}>", "<tr>", "<td>{v1}</td>", "<td>{v2}</td>", "<td>{v3}</td>", "</tr>", "</table>" ); xt.append("xt", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"}); xt.compile(); });
如果需要请在附件下载API.
相关推荐
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
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 ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
目录 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学习笔记,共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
6.3.2 Ext.core.DomHelper.applyStyles() 6.3.3 createTemplate() 6.3.4 insertAfter() 6.3.5 insertBefore() 6.3.6 insertFirst() 6.3.7 insertHtml() 6.3.8 overwrite() 6.4 Ext.core....
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引和简单运算支持 34 四、自动渲染单根数组 35 五、条件逻辑判断 36 六、即时执行任意的代码 36 七、模板成员函数 37 lipan 38...
extjs-basex.js extjs-basex.js extjs-basex.js
Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性
当树节点较多的时候很好用,具体的可以下载下来试试
extjs 主要应用了button的布局,和事件提交
EXTjs的上传组件
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
Extjs3.4 Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记 里面有3.4的开发包,附属:Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记
已经整理,能直接看效果的哦,用着不错,要使用的拿走吧