La diferencia entre renderTo y applyToLa diferencia entre renderTo y applyTo en ExtJS Comprender y pensar en applyTo y renderTo Personalmente, creo que estos dos artículos no son lo suficientemente populares. Escriba un ejemplo simple para ver qué código se genera al final. Copie el código de la siguiente manera: lt; headgt; lt; titlegt; ApplyTolt; href ="ext-3.1.0/resources/css/ext-all.css" /gt; lt; tipo de script="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug js"gt;lt;/scriptgt;lt;script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"gt;lt;/scriptgt;lt;script type=". text /javascript" src=" ext-3.1.0/src/locale/ext-lang-zh_CN.js"gt；lt;/scriptgt; lt;script type="text/javascript"gt; Ext.onReady(función( ) { var botón = new Ext.Button({ renderTo: 'botón', texto: 'OK' }); lt;/scriptgt lt;/headgt;bodygt; gt ;sadfalt;/divgt; lt;/bodygt; lt;/htmlgt; El html generado por este código es el siguiente: En el caso del botón applyTo:, el código generado es el siguiente: Obviamente, en pocas palabras, applyTo agrega un componente después del elemento especificado y renderTo agrega componentes dentro del elemento especificado. A continuación, exploremos más a fondo los misterios del código fuente extjs. Observe cómo se usan estos dos elementos de configuración internamente en extjs y use el complemento firebug para depurar el archivo ext-all-debug.js. Existe un fragmento de código de este tipo en el constructor Ext.Component Ext.Component = function(config){...} (línea 9270 en la versión 3.1.0): Copie el código de la siguiente manera: if(this.applyTo){ this applyToMarkup( this.applyTo); eliminar this.applyTo; }else if(this.renderTo){ this.render(this.renderTo); eliminar this.renderTo; El método applyToMarkup y el atributo renderTo permitirán que el componente llame al método de renderizado. El atributo applyTo solo es válido cuando estas dos propiedades se configuran al mismo tiempo. Esto se explica en la documentación de extjs.
El método applyToMarkup tiene este aspecto (línea 9560 en la versión 3.1.0), copie el código: applyToMarkup: function(el){ this.allowDomMove = this.el = Ext.get(el) this.render( this.el); .dom.parentNode); } eventualmente se llamará a render, pero la posición de render es parentNode y el método de render es el siguiente (línea 9370 de la versión 3.1.0). Copie el código de la siguiente manera: render: function(container,). posición){ if (!this.rendered & this.fireEvent('beforerender', this)! == false){ if (!container & this.el){ this.el = Ext.get(this.el) ; amp; this.el = Ext.get(this.el); contenedor amp; this.el = Ext.get(this.el contenedor amp; Ext.get(contenedor); if(this.ctCls){ this.container.addClass(this.ctCls } this.rendered = true; si(posición! == indefinido){ if (Ext.isNumber(posición)) { posición = this.container.dom.childNodes[posición]; }else{ posición = Ext.getDom(posición); } this.onRender(this.el); contenedor = this.el.parentNode; false; } this.} 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); eliminar this.cls } if(this.style){this.el.applyStyles(this.style); } if(this.overCls){this.el.addClassOnOver(this.overCls); } this.fireEvent('render', this); var contentTarget = this.getContentTarget(); (Ext.DomHelper.markup(this.html)); eliminar th