The difference of Renderto and ApplyTo in ExtJS
Understanding and thinking of ApplyTo and Renderto
Personally think that these two articles are not popular enough to write. Write a simple example to see what code is eventually generated,
Copy Code code as follows:
<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>
<body>
<div id= "button" >sadfa</div>
</body>
The HTML generated by this code is as follows:
If it is Applyto:button, the generated code is:
Obviously, simply put, theApplyTo is added to the specified element, and the Renderto is added to the specified element .
Next, we will slightly explore the ExtJS source of the mystery. See how the ExtJS internal use of these two configuration items, using the Firebug plug-in debugging ext-all-debug.js this file.
Constructor ext.component = function (config) {...} in Ext.component There is such a piece of code (3.1.0 version is 9270 lines):
Copy Code code 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 property makes component invoke the Applytomarkup method, and Renderto makes it call the Render method, and if all two are set, only applyto valid, which is also noted in the ExtJS documentation.
The Appyltomarkup method is as follows (the 3.1.0 version is 9560 lines),
Copy Code code as follows:
Applytomarkup:function (EL) {
This.allowdommove = false;
This.el = Ext.get (EL);
This.render (This.el.dom.parentNode);
}
It eventually calls render, but render's location is Parentnode,render (3.1.0 version is 9370 lines)
Copy Code code 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;
}
The Render method looks more complicated, but it's not too hard to read, mainly to set class for a DOM node, visibility, which generates the corresponding HTML code for the component in the OnRender method.
In understanding and thinking of ApplyTo and RendertoThe El configuration properties mentioned in, I check ExtJS's document found that this is a read-only property, although there are methods to override it, but generally do not need to manually set, the following is the panel's public properties el file text:
El : ext.element
The ext.element which encapsulates this Component. Read-only.
This would usually be a <DIV> element created by the class ' s OnRender method, but which may is overridden USI ng the autoEl config.
Note: This element is available until this Component has been rendered.
So I guess this article is written in the previous version of ExtJS. Personally, El is a DOM node that is tightly wrapped around a extjs component, typically generated by ExtJS itself, like a cell membrane, which, if brushed aside, is incomplete and likely to behave abnormally. The container in the Render method (that is, the parent element of the specified element in the ApplyTo, the element specified in Renderto) is the parent element of the component, which can include additional HTML elements or container components.
To sum up, in fact ApplyTo and Renderto not very essential difference, just render position is different.
