Ext:Panel之applyTo与renderTo区别

现在遇到了一些问题：

一、显示的问题
事实上，这个问题是所有组件的问题，凡是从Ext.Component继承的类都面临这个问题。
例如，我写了一行这样的代码，但是没有任何结果：
var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});
这是什么原因呢？
if(this.applyTo){
this.applyToMarkup(this.applyTo);
delete this.applyTo;
}else if(this.renderTo){
this.render(this.renderTo);
delete this.renderTo;
}
这几行代码是写在Ext.Component的构造函数中的。它标示如果applyTo、renderTo有值，就会在对象创建的时候直接呈现，如果这两值都没有，那就只能手工调用render函数了。
然而这有一个问题，applyTo与renderTo倒底有什么区别，它们取值类型可以是哪些呢？看代码。
applyTo的情况依赖于this.applyToMarkup来实现呈现。找到它的代码：
applyToMarkup : function(el){
this.allowDomMove = false;
this.el = Ext.get(el);
this.render(this.el.dom.parentNode);
}
而renderTo的情况是直接依赖于this.render(this.renderTo)的。这两者的差别很明显了，但是，这个问题到目前还不能说清楚，我发现，Ext.Panel最后生成的代码如下：
<div id="panel2" class="x-panel" style="width: 300px;">
<div id="ext-gen14" class="x-panel-header x-unselectable" style="-moz-user-select: none; cursor: move;">
<span id="ext-gen18" class="x-panel-header-text">这是标题栏</span>
</div>
<div id="ext-gen15" class="x-panel-bwrap">
<div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容！！！</div>
</div>
</div>
由上代码可知，panel的代码总是外面一个容器：x-panel，然后里面几个，这儿是：x-panel-header、x-panel-bwrap。现在可以说一说renderTo与appplyTo的区别了。
renderTo与applyTo的传入参数的数据类型与Ext.get的参数类型一样，可是dom、string、Element。它们最大的不同在于容器，这个容器不是指x-panel所对应的元素，而是指x-panel所对应元素的父元素。由源代码可知：
当为applyTo时，它调用render(this.el.dom.parentNode);可见，x-panel的容器为applyTo对应元素的父元素。也即是applyTo事实上就是x-panel。而renderTo时，renderTo所对应元素是x-panel的容器。如何验证这个问题呢？请到FireBug中看一看就晓得了。
上面说了一大通，我再总结一下：
renderTo：对应x-panel所在div的父元素；
applyTo：对应x-panel所在div本身。
二、Ext.Component的几个极其重要的成员
component.el：在panel中相当于x-panel所对应的div。它表示Component所对应的最外层html元素。
component.id：在panel中相当于x-panel所对应的div的id，如果x-panel所在div没有id，那么就自己分配一个。
component.container：它在panel中相当于x-panel所在div的父元素。即x-panel的容器。也即是：component的容器。
如果没有分清楚这个问题，那么下面代码会产生问题：
var p=new Ext.Panel({title:&apos;my title&apos;,width:300,height:300,renderTo:&apos;panel1&apos;});
console.info(Ext.getCmp(&apos;panel1&apos;));
结果如何呢？undefined！！
为什么是这样呢，因为，getCmp用的id即是component.id。而这个id对应的是x-panel所在元素的id或者自由分配的。而renderTo对应的元素不是x-panel。而是x-panel的父亲。这个问题极容易搞错。
这儿的两个问题其实都是Ext.Component那里的。下一篇正式研究一下Ext.Panel的API了。
转自:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662824.aspx