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利用ajax调用后台方法实例
Aug 23 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
JavaScript知识点整理
Dec 09 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP 错误处理机制
2015/07/06 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
党支部承诺书范文
2014/03/28 职场文书
预备党员转正考核材料
2014/06/03 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
教师思想工作总结2015
2015/05/13 职场文书
甲午风云观后感
2015/06/02 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python