|
|
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如下：
如果是applyTo:button，則生成的代碼為：
很明顯，簡單的說，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技術：Extjs學習筆記之五 一個小細節renderTo和applyTo的區別，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
