經常使用contentEL,renderTo, applyTo 來增加HTML元素或是Ext JS 組件，這幾個之間有什麼關係，為什麼Ext JS要提供這幾種不同的方式？
官方解釋ContentEL
從Ext.AbstractComponent這個類開始有這個配置。
使用一個已存在的HTML元素，或者是這個元素的id 來作為某個組件的的內容。(是在組件渲染後加入)
需要注意的是：
在render事件觸發的時候，在文檔中還找不到這個元素。這個HTML元素不會參與組件使用的布局方案。
為了防止添加進面板時出現短期的閃爍， 最好時添加 x-hidden或是x-hide-display 的CSS 類。
renderTo
從Ext.AbstractComponent這個類開始有這個配置。
指定某個組件要渲染的元素的id 或是DOM元素。
注意：
如果這個組件將會是一個容器的子項的話，不要使用這個配置選項。因為它負責了容器的布局管理器的渲染和管理子項的任務。
使用這個配置，不需要呼叫 render()
ContentEl VS renderTo這兩者的可比性不強， 因為使用的目的完全不同。
contentEl是在Ext的組件中插入HTML的元素。而renderTo則是在HTML的元素中插入Ext 的組件。
所以，強制使用到這兩個的配置的狀況也是可以的， 類似：
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head><title> New Document </title><META NAME="Author" CONTENT="oscar999"><script type="text/javascript" src="extjs/ext-all.js"></script><link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" /><script>Ext.onReady(function(){Ext.create('Ext.panel.Panel', { title: 'Hello', width: 200, html: 'Hello World!', contentEl: 'content', renderTo: 'content-div'}); });</script></head><body><div id="content">111111</div><div id="content-div"></div></body></html>
這裡會把 id 為content 的內容移到 content-div 下面， 所以注意這裡有個移動的操作。
applyTo VS renderTo其實在Ext JS4 中已經取消這個配置選項了，但是為了和以前版本相容，還是可以使用的。 使用的效果是完全一樣的，都是把component 產生的內容插入到HTML的元素中。看例子：
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head><title> New Document </title><META NAME="Author" CONTENT="oscar999"><script type="text/javascript" src="extjs/ext-all.js"></script><link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" /><script>Ext.onReady(function(){Ext.create('Ext.Button', { renderTo: 'render-div', text : 'Click me', scale : 'large'});Ext.create('Ext.Button', { renderTo: 'apply-div', text : 'Click me', scale : 'large'}); });</script></head><body><div id="render-div">render-div</div><div id="apply-div">apply-div</div></body></html>
網路上有說這兩者使用的效果不同（component產生內容放置的位置不一樣）
http://www.cnblogs.com/yinzixin/archive/2010/01/06/1640233.html
不過這篇文章使用的是Ext JS 3版本，不知道是否是在 Ext JS 4中統一了。
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
