ExtJS初学——renderTo/applyTo区别

朴灿烈づ我的快乐病毒、 2022-08-12 03:29 128阅读 0赞

## **applyTo** ##

**一、applyTo的使用：**  
 1、applyTo所指向的el元素必须要有父节点。   
2 、applyTo所指向的el元素实际上是充当了对象要渲染的模板，对象是渲染在其父节点内。即对象实例化后所产生的html代码是插入在el元素的父节点内，而el元素本身将只作为模板，并不作为真正的在其位置上的元素，既然作为模板，只是利用其标签内的部分style和class，就不应该包含子节点（包括文本）。   
3 、这个作为模板的el元素很重要，必须是要存在的。

<pre name="code" class="html"><pre name="code" class="html"></html>
    <head> 
    <title>RenderTo and ApplyTo</title> 
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="ext-lang-zh_CN.js" charset="utf-8"></script>
    <script>
    Ext.onReady(function () {
    	var button = new Ext.Button({ 
    		applyTo: 'button', 
    		text:'OK' 
    	}); 
    });
    </script>
    </head> 
    <body> 
    	<div id="button">sadfa</div> 
    </body>
    </html>

Html显示结果：

![Center][]

--------------------

## renderTo ##

**二、renderTo的使用：**   
 1、可以有el配置选项。   
 2、如果有el配置选项，则其指向的el元素充当了模板，并且必须存在。   
 3、renderTo所指向的el元素将作为对象渲染的入口，即render所产生的html代码将作为renderTo所指向的el元素的子节点。   
 4、如果有el配置选项，那么render会将el配置选项所指向的el元素作为模板然后产生html代码作为renderTo所指向的el元素的子节点。

Html显示结果：

![Center 1][]

<strong>renderTo:'test'</strong>: 网页中就要有个div 的id是test ；
    <strong>renderto:Ext.getBody()</strong>：加载网页 body 的时候就加载ext 。

参考自：[http://www.jb51.net/article/21749.htm][http_www.jb51.net_article_21749.htm] 及 [http://blog.csdn.net/zhaoqiliang527/article/details/5844380][http_blog.csdn.net_zhaoqiliang527_article_details_5844380]

[Center]: /images/20220810/dfd61d5a183c4257967655aa31ab6b4a.png
[Center 1]: /images/20220810/0805f4cfd16b4ebfbaa5e750c505c62a.png
[http_www.jb51.net_article_21749.htm]: http://www.jb51.net/article/21749.htm
[http_blog.csdn.net_zhaoqiliang527_article_details_5844380]: http://blog.csdn.net/zhaoqiliang527/article/details/5844380