- 浏览: 2650125 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 2547fromhttp://www.beyondrails.com/ ... -
Ext源码解析:1, Ext.js
2008-07-09 18:08 2887来自http://www.beyondrails.com/bl ... -
Extjs Introduction
2008-07-08 02:04 8768from http://hideto.beyondrails. ... -
模拟Ajax提交上传文件
2008-06-04 00:24 4185XMLHTTP不支持文件上传这种form提交,但是我们可以模拟 ... -
escape JavaScript
2008-03-27 16:55 2600单引号、双引号、<script></scri ... -
Multiple IE
2007-11-22 10:35 2499老问题,js和css对跨浏览器兼容问题 在一台电脑上共存IE3 ... -
编辑表单后离开本页面时做提示(jQuery版)
2007-11-15 15:21 4988添加如下JavaScript: $.fn.enable_c ... -
正确使用Prototype,节省额外的100K
2007-11-10 23:20 3059Part I: http://thinkweb2.com/pr ... -
十大Web应用漏洞清单,XSS排名第一
2007-10-22 12:36 3051owasp.org列出十大Web应用漏洞清单: 1, Cros ... -
IE下不能disabled掉select标签的option的解决方案
2007-10-11 17:48 8969原文:Select, Option, Disabled And ... -
Jester: JavaScript Client for REST
2007-09-04 13:51 2681Jester: JavaScriptian REST介绍了Je ... -
ASCB阅读笔记五、Arrays
2007-08-23 10:47 1789var array:Array = new Array() ... -
ASCB阅读笔记四、Numbers and Math
2007-08-15 12:08 1951显示最近的整数(四舍五入) Math.round(204.49 ... -
ASCB阅读笔记三、Runtime Environment
2007-08-10 23:34 24801,检测用户浏览器安装的Flash Player版本 http ... -
ASCB阅读笔记二、Custom Classes
2007-08-09 10:54 13411,ActionScript 3.0已经完全OO,所有AS代码 ... -
ASCB阅读笔记一、ActionScript Basics
2007-08-07 23:29 20101,使用trace来debug程序 package { ... -
method_missing in ActionScript 3/Flex
2007-08-07 18:05 1955method_missing in ActionScript ... -
Hilog 0.1 released.
2007-08-07 00:52 2051Hilog 0.1 release is a demo of ... -
在客户端保存状态
2007-08-05 18:13 3709Keeping State on the Client 在第 ... -
介绍Cairngorm
2007-08-05 15:36 19680Cairngorm是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'...
11.17.3 扩展Function.................... 306 11.17.4 扩展Number......................... 308 11.17.5 扩展Array........................... 308 11.18 Ext.ux.Portal ............................... 309 ...
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学习笔记,共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
API 参考 API 参考里面详细描述了所有能在 Ext 类库里面找到的类和组件。最常用的类有: Ext.Element Ext.BorderLayout Ext.DomHelper Ext.TabPanel Ext.UpdateManager
9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...
其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件,如图xx所示。 控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、...
6.13.3 将废弃的键盘绑定重新生效 6.14 Ext.KeyMap提供更灵活强大的对按键的处理方法 6.14.1 构造函数 6.14.2 给对象添加键盘绑定 6.14.3 废弃已绑定到KeyMap的配置 6.14.4 将KeyMap或废弃的配置重新生效 6.14...
16.7.3 商品信息的删除 16.7.4 商品信息的更新 第17章 ExtJS案例:企业任务管理系统 17.1 系统概述 17.2 需求分析 17.3 数据库设计 17.4 员工任务管理 17.4.1 个人任务处理 17.4.2 个人资料编辑 17.5 主管...
A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax...
16.7.3 商品信息的删除 16.7.4 商品信息的更新 第17章 ExtJS案例:企业任务管理系统 17.1 系统概述 17.2 需求分析 17.3 数据库设计 17.4 员工任务管理 17.4.1 个人任务处理 17.4.2 个人资料编辑 17.5 主管...
D.3. 感谢[游戏人生395181055]的大力支持 D.4. 感谢[綄帥77793603]的大力支持 D.5. 感谢[葡萄5793699]的大力支持 D.6. 感谢[天外小人442540141]的大力支持 D.7. 感谢[我想我是海39893874]的大力支持 D.8. 还要感谢:...
D.3. 感谢[游戏人生395181055]的大力支持 D.4. 感谢[綄帥77793603]的大力支持 D.5. 感谢[葡萄5793699]的大力支持 D.6. 感谢[天外小人442540141]的大力支持 D.7. 感谢[我想我是海39893874]的大力支持 D.8. 还要...
这本书我看了 很不错的 他的目录: 说在前头的 1. 闪烁吧!看看extjs那些美丽的例子。...A.3. 想把日期选择框单独拿出来用的看这里 B. 修改日志 C. 后记 C.1. 2007年12月5日,迷茫阶段 C.1.1. 仇恨 C.1.2. 反省
9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...
3.Ext.getDom var elDom = Ext.getDom('elId'); // 依据id来查dom节点 var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom节点 二、CSS元素 4.addClass Ext.fly('elId').addClass('myCls'); // 加入元素...
其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件,如图xx所示。 控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项...
第三章:Ext OOP基础 17 一、javascript类的定义 17 二、Extjs命名空间的定义 17 三、Extjs OOP 17 四、配置(config)选项 19 五、Ext.apply()和Ext.applyIf() 20 六、小结 21 第四章:消息框 22 一、话说消息框 22 ...
运行esperanto -b -i htmlbars-runtime.js -o htmlbars-runtime-bundle.js --strict 查看runtime-bundle文件。 在底部注意以下代码行: __export ( 'hooks' , function ( ) { return htmlbars_runtime__hooks ; } )...