Extjs Study Notes 5: A small detail of the difference between renderTo and applyTo

Extjs Study Notes 5: A small detail of the difference between renderTo and applyTo_extjs

WBOY

Release： 2016-05-16 18:37:07

Original

1567 people have browsed it

The difference between renderTo and applyTo in ExtJS

Understanding and thinking about applyTo and renderTo

Personally, I think these two articles are not popular enough. Write a simple example to see what code is finally generated,

Copy the code The code is as follows:

RenderTo and ApplyTo

sadfa

The html generated by this code is as follows:

If it is applyTo:button, the generated code is:

Obviously, simply put, applyTo adds the component after the specified element, while renderTo adds it within the specified element.

Next, let’s explore a little more about the mystery of extjs source code. Take a look at how these two configuration items are used internally in extjs, and use the firebug plug-in to debug the ext-all-debug.js file.

There is such a piece of code in the constructor of Ext.Component Ext.Component = function(config){…} (version 3.1.0 is line 9270):

Copy code The code is as follows:

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

The visible applyTo attribute makes Component calls the applyToMarkup method, and renderTo causes it to call the render method, and if both are set, only applyTo is valid. This is also specifically pointed out in the extjs documentation.

appylToMarkup method is as follows (3.1.0 version is 9560 lines),

Copy code The code is as follows:

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

It also ultimately calls render, but the position of render is parentNode, and the render method is as follows (version 3.1.0 is line 9370)

Copy code The code is as follows:

 
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

element created by the class's onRender method, but that may be overridden using the

<a href="http://www.extjs.com/output/Ext.Component.html#Ext.Component-autoEl"><font face="NSimsun" color="#0000ff">autoEl<code><a href="http://www.extjs.com/output/Ext.Component.html#Ext.Component-autoEl"><font face="NSimsun" color="#0000ff">autoEl</font></a>

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的位置不同。