Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢？个人认为这两篇文章写的不够通俗。

Ext.form.FormPanel({ // labelWidth: 75, // title: 'Form Layout', // bodyStyle:'padding:15px', // //renderTo

Ext.grid.GridPanel不能renderTo给一个DIV？Ext.grid.GridPanel不能renderTo给一个DIV吗？

Ext.onReady(function(){ var panel=new Ext.Panel({ renderTo:"hello

style元素 newExt.FormPanel({ title:'default', width:300, height:300, frame:true, border:true, renderTo

Ext.QuickTips.init(); var loginForm=new Ext.FormPanel ({ standardSubmit: true, url:'test.jsp', renderTo

var CheckboxTree = function() { CheckboxTree.superclass.constructor.call(this, { renderTo :

;  Ext.onReady(function() {   new Ext.Panel({     renderTo

Ext.onReady(function(){ var _panel = new Ext.Panel({ renderTo:Ext.getBody(), layout:"form&

值，通过id可以找到这个组件，建议一般加上这个id值, applyTo：（id）呈现在哪个html元素里面 contentEl：（id）呈现哪个html元素里面，把el内的内容呈现 renderTo

js代码如下：Ext.onReady(function(){vartabs=newExt.TabPanel({  applyTo:'tab',//renderTo:Ext.getBody(),           

newExt.Panel({ renderTo:"div2", frame:true

newExt.Panel({ renderTo:"div2", frame:true

newExt.Panel({ renderTo:"div2", frame:true, layout:"

newExt.Panel({ renderTo:"div2", frame:true, layout:"

newExt.Panel({ renderTo:"div2", frame:true, layout:"absolute", title:"绝对位置布局（Absolut

newExt.Panel({ renderTo:"div2", frame:true, layout:"absolute", title:"绝对位置布局（Absolut

varpanel=newExt.Panel({ renderTo:"div3", frame:true, layout:"card", title:"卡片式布局（CardLayout）", height

varpanel=newExt.Panel({ renderTo:"div3", frame:true, layout:"card", title:"卡片式布局（CardLayout）", height

newExt.Panel({ renderTo:"div1", frame:true, layout:"fit", width:400, height:200, title:"自适应布局（FitLayout

newExt.Panel({ renderTo:"div1", frame:true, layout:"fit", width:400, height:200, title:"自适应布局（FitLayout

renderTo：将目标元素作为新组件的容器。     frame：是否渲染面板，默认为false。      layout：面板的布局类型。     

renderTo：将目标元素作为新组件的容器。     frame：是否渲染面板，默认为false。      layout：面板的布局类型。     

配置项：      applyTo：将目标元素的父节点作为新组件的容器       renderTo

配置项：      applyTo：将目标元素的父节点作为新组件的容器       renderTo

Ext.onReady(function() { new Ext.Panel({ renderTo:Ext.getBody(), title:'面板头部header',

Ext.onReady(function() { var win = new Ext.Window({ renderTo : Ext.getBody(), title

var tbar2 = new Ext.Toolbar({ // renderTo : grid4.tbar, items : [{ text : 'text1', tooltip

nbsp; var tabs = new Ext.TabPanel({     xtype:"tabpanel", activeTab:0, renderTo

varconfig={title:'通过布局嵌套实现表单元素横排',labelWidth:50,bodyStyle:'padding:5555',frame:false,height:150,width:250,renderTo

1.按钮： var button=new Button({ renderTo:Ext.getBody(), text:'确定' }); alert(button.text);

代码: var grid = new Ext.grid.GridPanel({ renderTo: document.body, frame: true, title: '邮件回复

new Ext.form.FormPanel({              renderTo

其屬性： renderTo:----一般是上级的容器（Html-DOM模型的容器） e.g. renderTo:Ext.getBody

subjectTree = new Ext.tree.TreePanel({ renderTo: subComboxTreeID, loader: new Ext.tree.TreeLoader

首先，让我们回忆一下对于组件的讨论： 1.只有配置了applyTo或renderTo属性才会在构建组件时立刻进行render方法的调用； 2.如果是applyTo属性，则会对component的容器进行渲染

varmsForm=newExt.form.FormPanel({ title:'MultiSelectTest', width:700, bodyStyle:'padding:10px;', renderTo

tabpanel  js代码如下：   // Tab面板 var tabPanelReserveInfo = new Ext.TabPanel({ renderTo

Ext.layout.TableLayout定义，名称为table，该布局负责把容器中的子元素按照类似普通html标签Ext.onReady(function(){  varpanel=newExt.Panel({ renderTo

看下面的代码：Ext.onReady(function(){  varpanel=newExt.Panel({ renderTo:"hello", title:"容器组件", width

来看下面的代码:Ext.onReady(function(){  newExt.Panel({ renderTo:"hello", title:"容器组件", width:500

件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。

Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。

这个问题迷惑了我很久，后来终于用IE的开发人员工具找到答案。 一个panel类似的容器extjs会生成三个部分--外层，中层，内层。 内层叫body 所有会用bodyStyle这个属性，而这一属性，也正是解决ie下autoscroll会产生横向滚动条这一问题的关键。 当使用了applyTo:'testId'之后extjs会以id为testId的div做为你new出来的容器的外层。 而使用rende

myCheckboxGroup = new Ext.form.CheckboxGroup({ id:'myGroup', xtype: 'checkboxgroup', renderTo

如果多个子元素则只有一个元素充满整个容器）例一： 例二：如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：Js代码Ext.onReady(function(){  new Ext.Panel({          renderTo

ExtJS中的renderTo和applyTo的差别对applyTo和renderTo的理解和思考个人认为这两篇文章写的不够通俗。

下面是一个例子：复制代码代码如下:Ext.onReady(function(){vartb=newExt.Toolbar({renderTo:document.body,width:600,height

如果改为renderTo:Ext.getBody() IE6下，报Ext.get...为空或不是对象，FF下可以看到效果.

复制代码代码如下:varshowForm;functionpanelShowForm(){showForm=null;showForm=newExt.FormPanel({renderTo:"showPanel