The difference between the 51 small details of ExtJS learning notes Renderto and ApplyTo _extjs

Source: Internet
Author: User

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 '

<div id= "button" >sadfa</div>

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);
This.container.addClass (THIS.CTCLS);
This.rendered = true;
if (position!== undefined) {
if (Ext.isnumber (position)) {
Position = This.container.dom.childnodes[position];
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.el.applyStyles (;
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); (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.tpl[this.tplwritemode] (Contenttarget,;
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.