Extjs学习笔记之五 一个小细节renderTo和applyTo的区别


Posted in Javascript onJanuary 07, 2010

ExtJS中的renderTo和applyTo的差别

对applyTo和renderTo的理解和思考

个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码,

<head> 
<title>RenderTo and ApplyTo</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> 
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
var button = new Ext.Button({ 
renderTo: 'button', 
text:'OK' 
}); }); 
</script> 
</head> 
<body> 
<div id="button">sadfa</div> 
</body> 
</html>

此代码生成的html如下:
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别 
如果是applyTo:button,则生成的代码为:

Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

很明显,简单的说,applyTo是将组件加在了指定元素之后,而renderTo则是加在指定元素之内

接下来,我们再稍稍探寻下extjs源码的奥秘。看看extjs内部是如何使用这两个配置项的,利用firebug插件调试一下ext-all-debug.js这个文件。

在Ext.Component的构造函数Ext.Component = function(config){…}中有这样一段代码(3.1.0版本是9270行):

if(this.applyTo){ 
this.applyToMarkup(this.applyTo); 
delete this.applyTo; 
}else if(this.renderTo){ 
this.render(this.renderTo); 
delete this.renderTo; 
}

可见applyTo属性使得Component调用applyToMarkup方法,而renderTo使得它调用render方法,并且如果两个都设置的话仅有applyTo有效,这点在extjs的文档中也有特别指出。

appylToMarkup方法如下(3.1.0版本是9560行),

applyToMarkup : function(el){ 
this.allowDomMove = false; 
this.el = Ext.get(el); 
this.render(this.el.dom.parentNode); 
}

它最终调用的也是render,不过render的位置是parentNode,render方法如下(3.1.0版本是9370行)
render : function(container, position){ 
if(!this.rendered && this.fireEvent('beforerender', this) !== false){ 
if(!container && this.el){ 
this.el = Ext.get(this.el); 
container = this.el.dom.parentNode; 
this.allowDomMove = false; 
} 
this.container = Ext.get(container); 
if(this.ctCls){ 
this.container.addClass(this.ctCls); 
} 
this.rendered = true; 
if(position !== undefined){ 
if(Ext.isNumber(position)){ 
position = this.container.dom.childNodes[position]; 
}else{ 
position = Ext.getDom(position); 
} 
} 
this.onRender(this.container, position || null); 
if(this.autoShow){ 
this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]); 
} 
if(this.cls){ 
this.el.addClass(this.cls); 
delete this.cls; 
} 
if(this.style){ 
this.el.applyStyles(this.style); 
delete this.style; 
} 
if(this.overCls){ 
this.el.addClassOnOver(this.overCls); 
} 
this.fireEvent('render', this); var contentTarget = this.getContentTarget(); 
if (this.html){ 
contentTarget.update(Ext.DomHelper.markup(this.html)); 
delete this.html; 
} 
if (this.contentEl){ 
var ce = Ext.getDom(this.contentEl); 
Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); 
contentTarget.appendChild(ce); 
} 
if (this.tpl) { 
if (!this.tpl.compile) { 
this.tpl = new Ext.XTemplate(this.tpl); 
} 
if (this.data) { 
this.tpl[this.tplWriteMode](contentTarget, this.data); 
delete this.data; 
} 
} 
this.afterRender(this.container); 
if(this.hidden){ 
this.doHide(); 
} 
if(this.disabled){ 
this.disable(true); 
} 
if(this.stateful !== false){ 
this.initStateEvents(); 
} 
this.fireEvent('afterrender', this); 
} 
return this; 
}

render方法看起来比较复杂,仔细阅读下其实也不是太难,主要就是为一个DOM节点设置class,可见性,在onRender方法中会对这个组件生成相应的html代码。
对applyTo和renderTo的理解和思考 中提到的el配置属性,我查extjs的文档发现这是一个只读属性,虽然有方法覆盖它,不过一般不需要手动设置,下面是Panel的公共属性el的文档原文:

el : Ext.Element

The Ext.Element which encapsulates this Component. Read-only.

This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.

Note: this element will not be available until this Component has been rendered.

所以我估计此文写的是以前版本的extjs。个人认为,el是紧包裹着extjs组件的一个DOM节点,一般是由extjs自己生成的,好像细胞膜一样,如果拨开了它,那么这个组件就不完整了,很可能会表现的不正常。而render方法中的container(也就是applyTo中指定元素的父元素,renderTo中指定的元素),是该组件的父元素,这个container中可以包括其他的html元素或者extjs组件。

综上所述,其实applyTo和renderTo没有很本质区别,只是render的位置不同。

Javascript 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
EXT中xtype的含义分析
Jan 07 #Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 #Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 #Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
使用PDB简单调试Python程序简明指南
2015/04/25 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python extract及contains方法代码实例
2020/09/11 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
会计与审计毕业生自荐信范文
2013/12/30 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
童年读书笔记
2015/06/26 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
利用python进行数据加载
2021/06/20 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL