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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
JS 表单验证大全
Nov 23 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
理解 JavaScript EventEmitter
Mar 29 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
JavaScript中继承原理与用法实例入门
May 09 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
一次编写,随处运行
2006/10/09 PHP
PHP调用三种数据库的方法(1)
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
php数组去重的函数代码
2013/02/03 PHP
php绘制一个矩形的方法
2015/01/24 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP微商城开源代码实例
2019/03/27 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python中的类学习笔记
2014/09/23 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
ubuntu上安装python的实例方法
2019/09/30 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python 实现汉诺塔游戏
2020/11/28 Python
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
毕业设计论文致谢词
2015/05/14 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
python入门之算法学习
2021/04/22 Python
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android