快捷搜索:

ExtJS中的renderTo何applyTo的差别

在config中的写法

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着末天生的代码如下:

这是标题栏

这是面板的内容!!!

由上代码可知,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的父亲。这个问题极轻易搞错。

您可能还会对下面的文章感兴趣: