- 浏览: 2683256 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
80后的童年2:
深入浅出MongoDB应用实战开发网盘地址:https://p ...
MongoDB入门教程 -
shliujing:
楼主在不是精通java和php的前提下,请不要妄下结论。
PHP、CakePHP哪凉快哪呆着去 -
安静听歌:
希望可以一给一点点注释
MySQL存储过程之代码块、条件控制、迭代 -
qq287767957:
PHP是全宇宙最强的语言!
PHP、CakePHP哪凉快哪呆着去 -
rryymmoK:
深入浅出MongoDB应用实战开发百度网盘下载:链接:http ...
MongoDB入门教程
from http://www.beyondrails.com/blogs/21
Ext的DomHelper主要是定义了一些操作Dom元素的Helper方法:
Ext支持纯HTML或者数组或一个JavaScript对象来描述用来添加或覆盖的元素,底层实现为私有的createHtml方法:
可以看到,
如果参数是String则表示是html,则直接返回;
如果参数是Array则为每个数组元素调用createHtml
如果参数是Object则根据属性来拼接html字符串
其中insertBefore、insertAfter、insertFirst、append都会调用insertHtml方法:
insertHtml方法则先尝试调用insertAdjacentHTML,但由于insertAdjacentHTML只支持IE,所以后面又对其他浏览器做了相应的alternative,模拟IE下的insertAdjacentHTML方法
基本思路是使用createRange来创建一个Range对象,并通过调用setStartBefore或setStartAfter来设置Range相对于其他Node的位置,最后调用createContextualFragment返回一个Dom片段,然后调用insertBefore或appendChild来完成插入html
具体参考Mozilla Developer Center
overwrite方法则实际上是替换Dom元素的innerHTML,而不是顾名思义的“覆盖”
Ext的DomHelper主要是定义了一些操作Dom元素的Helper方法:
insertBefore insertAfter insertFirst append overwrite insertHtml applyStyles
Ext支持纯HTML或者数组或一个JavaScript对象来描述用来添加或覆盖的元素,底层实现为私有的createHtml方法:
var createHtml = function(o){ if(typeof o == 'string'){ return o; } var b = ""; if (Ext.isArray(o)) { for (var i = 0, l = o.length; i < l; i++) { b += createHtml(o[i]); } return b; } if(!o.tag){ o.tag = "div"; } b += "<" + o.tag; for(var attr in o){ if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue; if(attr == "style"){ var s = o["style"]; if(typeof s == "function"){ s = s.call(); } if(typeof s == "string"){ b += ' style="' + s + '"'; }else if(typeof s == "object"){ b += ' style="'; for(var key in s){ if(typeof s[key] != "function"){ b += key + ":" + s[key] + ";"; } } b += '"'; } }else{ if(attr == "cls"){ b += ' class="' + o["cls"] + '"'; }else if(attr == "htmlFor"){ b += ' for="' + o["htmlFor"] + '"'; }else{ b += " " + attr + '="' + o[attr] + '"'; } } } if(emptyTags.test(o.tag)){ b += "/>"; }else{ b += ">"; var cn = o.children || o.cn; if(cn){ b += createHtml(cn); } else if(o.html){ b += o.html; } b += "</" + o.tag + ">"; } return b; }
可以看到,
如果参数是String则表示是html,则直接返回;
如果参数是Array则为每个数组元素调用createHtml
如果参数是Object则根据属性来拼接html字符串
其中insertBefore、insertAfter、insertFirst、append都会调用insertHtml方法:
insertHtml : function(where, el, html){ where = where.toLowerCase(); if(el.insertAdjacentHTML){ if(tableRe.test(el.tagName)){ var rs; if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){ return rs; } } switch(where){ case "beforebegin": el.insertAdjacentHTML('BeforeBegin', html); return el.previousSibling; case "afterbegin": el.insertAdjacentHTML('AfterBegin', html); return el.firstChild; case "beforeend": el.insertAdjacentHTML('BeforeEnd', html); return el.lastChild; case "afterend": el.insertAdjacentHTML('AfterEnd', html); return el.nextSibling; } throw 'Illegal insertion point -> "' + where + '"'; } var range = el.ownerDocument.createRange(); var frag; switch(where){ case "beforebegin": range.setStartBefore(el); frag = range.createContextualFragment(html); el.parentNode.insertBefore(frag, el); return el.previousSibling; case "afterbegin": if(el.firstChild){ range.setStartBefore(el.firstChild); frag = range.createContextualFragment(html); el.insertBefore(frag, el.firstChild); return el.firstChild; }else{ el.innerHTML = html; return el.firstChild; } case "beforeend": if(el.lastChild){ range.setStartAfter(el.lastChild); frag = range.createContextualFragment(html); el.appendChild(frag); return el.lastChild; }else{ el.innerHTML = html; return el.lastChild; } case "afterend": range.setStartAfter(el); frag = range.createContextualFragment(html); el.parentNode.insertBefore(frag, el.nextSibling); return el.nextSibling; } throw 'Illegal insertion point -> "' + where + '"'; }
insertHtml方法则先尝试调用insertAdjacentHTML,但由于insertAdjacentHTML只支持IE,所以后面又对其他浏览器做了相应的alternative,模拟IE下的insertAdjacentHTML方法
基本思路是使用createRange来创建一个Range对象,并通过调用setStartBefore或setStartAfter来设置Range相对于其他Node的位置,最后调用createContextualFragment返回一个Dom片段,然后调用insertBefore或appendChild来完成插入html
具体参考Mozilla Developer Center
overwrite方法则实际上是替换Dom元素的innerHTML,而不是顾名思义的“覆盖”
overwrite : function(el, o, returnElement){ el = Ext.getDom(el); el.innerHTML = createHtml(o); return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; }
发表评论
-
Ext源码解析:2, DomQuery.js
2008-07-11 10:54 2642fromhttp://www.beyondrails.com/ ... -
Ext源码解析:1, Ext.js
2008-07-09 18:08 2947来自http://www.beyondrails.com/bl ... -
Extjs Introduction
2008-07-08 02:04 8833from http://hideto.beyondrails. ... -
模拟Ajax提交上传文件
2008-06-04 00:24 4231XMLHTTP不支持文件上传这种form提交,但是我们可以模拟 ... -
escape JavaScript
2008-03-27 16:55 2659单引号、双引号、<script></scri ... -
Multiple IE
2007-11-22 10:35 2562老问题,js和css对跨浏览器兼容问题 在一台电脑上共存IE3 ... -
编辑表单后离开本页面时做提示(jQuery版)
2007-11-15 15:21 5049添加如下JavaScript: $.fn.enable_c ... -
正确使用Prototype,节省额外的100K
2007-11-10 23:20 3093Part I: http://thinkweb2.com/pr ... -
十大Web应用漏洞清单,XSS排名第一
2007-10-22 12:36 3119owasp.org列出十大Web应用漏洞清单: 1, Cros ... -
IE下不能disabled掉select标签的option的解决方案
2007-10-11 17:48 9033原文:Select, Option, Disabled And ... -
Jester: JavaScript Client for REST
2007-09-04 13:51 2724Jester: JavaScriptian REST介绍了Je ... -
ASCB阅读笔记五、Arrays
2007-08-23 10:47 1819var array:Array = new Array() ... -
ASCB阅读笔记四、Numbers and Math
2007-08-15 12:08 2031显示最近的整数(四舍五入) Math.round(204.49 ... -
ASCB阅读笔记三、Runtime Environment
2007-08-10 23:34 25191,检测用户浏览器安装的Flash Player版本 http ... -
ASCB阅读笔记二、Custom Classes
2007-08-09 10:54 13761,ActionScript 3.0已经完全OO,所有AS代码 ... -
ASCB阅读笔记一、ActionScript Basics
2007-08-07 23:29 20521,使用trace来debug程序 package { ... -
method_missing in ActionScript 3/Flex
2007-08-07 18:05 2011method_missing in ActionScript ... -
Hilog 0.1 released.
2007-08-07 00:52 2091Hilog 0.1 release is a demo of ... -
在客户端保存状态
2007-08-05 18:13 3778Keeping State on the Client 在第 ... -
介绍Cairngorm
2007-08-05 15:36 19723Cairngorm是Adobe Labs上的Flex MVC框 ...
相关推荐
if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) { var fd=Ext.get('frmDummy'); if (!fd) { fd=Ext.DomHelper.append(Ext.getBody(),{tag:'form',method:'post',id:'frmDummy'...
- **概述**:Ext.DomHelper类提供了一组用于创建、插入和更新DOM节点的方法。 - **常用方法**: - `Ext.DomHelper.append(parent, config)`:向指定的父元素添加子元素。 - `Ext.DomHelper.insertFirst(parent, ...
EXT JS是一个强大的JavaScript库,主要用于构建用户界面,尤其适用于企业级应用。在使用EXT JS时,首先需要在HTML页面中引入必要的库文件,包括样式表(ext-all.css)、适配器(ext-base.js)以及EXT JS的核心库...
- `Ext.DomHelper.append(parent, config)`: 向父元素添加子元素。 - `Ext.DomHelper.insertHtml(position, ref, html)`: 在指定位置插入HTML字符串。 #### 10. Ext.Template 类 (P.14) - **概述**:用于生成HTML...
11.17.3 扩展Function.................... 306 11.17.4 扩展Number......................... 308 11.17.5 扩展Array........................... 308 11.18 Ext.ux.Portal ............................... 309 ...
- **Ext.form概述**:Ext JS中的`Ext.form`模块是用于处理表单元素的强大工具,它提供了各种表单控件(如文本框、下拉列表等),以及验证规则的支持。 - **Ext.TabPanel篇**:`Ext.TabPanel`是一个容器组件,用于...
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"> <script type="text/javascript" src="extjs/ext-all.js"> ``` 这些文件分别提供了EXTJS 的样式和必要的JavaScript 功能。`Ext.BLANK_IMAGE_...
Ext.DomHelper.append(document.body, { tag: 'p', cls: 'some-class' }); // 更新刚添加的p元素的内容 Ext.select('p.some-class').update('ExtCore successfully injected'); }); ``` #### Element模块 **...
目录 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
- **示例**: `Ext.DomHelper.append('divId', '<span>Text</span>')`。 **5.2 模板** - **用途**: 用于动态生成 HTML 内容。 - **实现**: `Ext.XTemplate` 类提供模板引擎。 - **示例**: `var tpl = new Ext....
Ext.DomQuery/DomHelper/Template - **DOM查询**: `Ext.DomQuery`提供了类似jQuery的语法来选择DOM元素。 - **模板引擎**: `Ext.Template`允许开发者使用模板字符串创建HTML,并可以方便地插入数据。 ```...
- **定义**:ExtCore 是一款基于 MIT 许可发布的轻量级 JavaScript 库,它提供了丰富的功能来帮助开发者快速构建高质量且可扩展的应用程序。 - **目标**:旨在促进 Web 开发的效率,同时确保代码质量与可维护性。 - ...
3. **创建窗口组件**:EXT_JS提供了丰富的组件库,如创建窗口组件的示例代码所示,可以创建一个具有标题、宽度和高度的窗口,并填充HTML内容。`Ext.Window`是EXT_JS中的一个核心组件,可以用来创建弹出式窗口。 4. ...
API 参考 API 参考里面详细描述了所有能在 Ext 类库里面找到的类和组件。最常用的类有: Ext.Element Ext.BorderLayout Ext.DomHelper Ext.TabPanel Ext.UpdateManager
3. **页面与脚本的分离**:Ext.js提倡在开发中将页面标记和JavaScript脚本彻底分离,文档中会有介绍如何通过事件管理器Ext.onReady来管理脚本的加载时机和页面的初始化过程。 4. **元素操作与模板**:Ext.js提供了...
- **控件(Widgets)**:EXT_JS提供了丰富的可视化组件,如面板、表格、树、窗口等,它们基于底层API构建。 - **实用工具(Utils)**:提供了数据处理、JSON编码解码、日期管理、Ajax请求、Cookie管理等辅助功能。...
- **第三部分:Ext JS** - **第17章:架构和库约定** 讨论Ext JS的架构设计和基本约定。 - **第18章:元素、DomHelper 和模板** 介绍如何使用Ext JS处理DOM元素、辅助类和模板。 - **第19章:组件、布局和...
1. **Ext类**:EXT库的基础类,提供了许多实用的方法,如创建元素、事件处理等。 2. **Array类**:扩展了JavaScript原生的数组对象,提供了如each、indexOf、remove等功能,增强了数组操作能力。 3. **Number类**...