Extjs學習筆記之五一個小細節(jié)renderTo和applyTo的區(qū)別

更新時間：2010年01月07日 21:15:45 作者：

Extjs的組件有兩個看起來類似的配置項，applyTo和renderTo，這兩個配置項都是用來指定將該extjs組件加載到什么位置。那他們到底有什么區(qū)別呢，網(wǎng)上搜了下，有兩篇博文也是關于這個的。

對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如下：

如果是applyTo:button，則生成的代碼為：

很明顯，簡單的說，applyTo是將組件加在了指定元素之后，而renderTo則是加在指定元素之內(nèi)。

接下來，我們再稍稍探尋下extjs源碼的奧秘。看看extjs內(nèi)部是如何使用這兩個配置項的，利用firebug插件調(diào)試一下ext-all-debug.js這個文件。

在Ext.Component的構造函數(shù)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調(diào)用applyToMarkup方法，而renderTo使得它調(diào)用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); 
} 

它最終調(diào)用的也是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節(jié)點設置class，可見性，在onRender方法中會對這個組件生成相應的html代碼。
在對applyTo和renderTo的理解和思考中提到的el配置屬性,我查extjs的文檔發(fā)現(xiàn)這是一個只讀屬性，雖然有方法覆蓋它，不過一般不需要手動設置，下面是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節(jié)點，一般是由extjs自己生成的，好像細胞膜一樣，如果撥開了它，那么這個組件就不完整了，很可能會表現(xiàn)的不正常。而render方法中的container（也就是applyTo中指定元素的父元素，renderTo中指定的元素），是該組件的父元素，這個container中可以包括其他的html元素或者extjs組件。

綜上所述，其實applyTo和renderTo沒有很本質(zhì)區(qū)別，只是render的位置不同。

您可能感興趣的文章: