ExtJS中的renderTo何applyTo的差别

 

appyTo

renderTo

在外部的写法

applyToMarkup

render

　　老实不客气的说：没有Panel，就没有extjs的盛名。那些最常见的UI组件都是继承自它。暴爽的东西啊。我就在想，这么好的东西怎么会出现得这么晚呢？

　　在这一篇中，将详细讲一讲Ext.Panel的方方面面。

　　现在遇到了一些问题：

　　一、显示的问题

　　事实上，这个问题是所有组件的问题，凡是从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:'my title',width:300,height:300,renderTo:'panel1'});

　　console.info(Ext.getCmp('panel1'));

　　结果如何呢？undefined！！

　　为什么是这样呢，因为，getCmp用的id即是component.id。而这个id对应的是x-panel所在元素的id或者自由分配的。而renderTo对应的元素不是x-panel。而是x-panel的父亲。这个问题极容易搞错。