Home > Developer > JavaScript
Differences between renderTo and applyTo in ExtJS
Understanding and thinking about applyTo and renderTo
I personally think that these two articles are not popular enough. Write a simple example to see what code is generated,
Copy codeThe Code is as follows:
<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: 'click ',
Text: 'OK'
});
});
</Script>
</Head>
<Body>
<Div id = "button"> sadfa </div>
</Body>
</Html>
The html generated by this Code is as follows:
If applyTo: button, the generated code is:
Obviously, simply put,ApplyTo adds a component to a specified element, while renderTo adds the component to the specified element..
Next, let's look at the mysteries of extjs source code. Look at how extjs uses these two configuration items internally, use the firebug plug-in to debug the ext-all-debug.js file.
In Ext. Component, the constructor Ext. Component = function (config ){...} There is such a piece of code (line 3.1.0 is line 9270 ):
Copy codeThe 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;
}
It can be seen that the applyTo attribute enables Component to call the applyToMarkup method, and renderTo make it call the render method. If both are set, only applyTo is valid. This is also pointed out in extjs documentation.
The appylToMarkup method is as follows (the 3.1.0 version is 9560 rows ),
Copy codeThe Code is as follows:
ApplyToMarkup: function (el ){
This. allowDomMove = false;
This. el = Ext. get (el );
This. render (this. el. dom. parentNode );
}
It finally calls render, but the render is located in parentNode, And the render method is as follows (row 9370 in version 3.1.0)
Copy codeThe 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-den ', '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-den ', '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;
}
The render method looks complicated. It is not difficult to read it carefully. It mainly sets the class and visibility for a DOM node, and generates the corresponding html code for this component in the onRender method.
According to the el Configuration Attribute mentioned in the understanding and consideration of applyTo and renderTo, I checked the extjs document and found that this is a read-only attribute. Although there is a way to overwrite it, it generally does not need to be set manually, the following is the original document of el, a public attribute of Panel:
El: Ext. Element
The Ext. Element which encapsulates this Component. Read-only.
This willUsuallyBe a <DIV> element created by the class's onRender method, but that may be overridden usingautoElConfig.
Note: This element will not be available until this Component has been rendered.
So I guess this article is about extjs of the previous version. I personally think that el is a DOM node tightly wrapped in extjs components, which is generally generated by extjs itself. It is like a cell membrane. If it is opened, this component is incomplete, it may be abnormal. The container in the render method (that is, the parent element of the specified element in applyTo and the element specified in renderTo) is the parent element of the component, this container can include other html elements or extjs components.
To sum up, applyTo and renderTo are essentially different, but the render location is different.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
