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

你可能感兴趣的:(Ext:Panel之applyTo与renderTo区别)