Extjs学习笔记之五一个小细节图表的页面显示容器和应用于的区别

框架中的图表的页面显示容器和应用于的差别对应用于和图表的页面显示容器的理解和思考个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码，复制代码代码如下：标题标题renderto和apply to/标题链接rel='样式表type=' text/CSS ' href=' Ext-3。1 .0/资源/CSS/Ext-all。CSS '/脚本类型=' text/JavaScript ' src=' http : Ext-3。1 .0/适配器/Ext-base-debug。js '/script脚本类型=' text/JavaScript ' src=' http 3360 Ext-3。1 .0按钮({ renderTo: 'button '，text : ' OK ' })；});/script/head body div id=' button ' sadfa/div/body/html此代码生成的超文本标记语言如下

如果是应用：按钮，则生成的代码为

很明显，简单的说，应用于是将组件加在了指定元素之后，而图表的页面显示容器则是加在指定元素之内。接下来，我们再稍稍探寻下框架源码的奥秘。看看框架内部是如何使用这两个配置项的，利用萤火虫插件调试一下ext-all-debug.js这个文件。在延伸文件系统成分的构造函数延伸文件系统组件=功能（配置){…}中有这样一段代码(3.1.0版本是9270行):复制代码代码如下： if(这个。应用于){这个。应用标记(这。申请到)；删除this.applyTo} else if(this。呈现给){ this。呈现给(这个。呈现给)；删除this.renderTo}可见应用于属性使得成分调用应用标记方法，而图表的页面显示容器使得它调用提出方法，并且如果两个都设置的话仅有应用于有效，这点在框架的文档中也有特别指出appylToMarkup。方法如下(3.1.0版本是9560行), 复制代码代码如下：应用标记：函数(埃尔){这个。allowcommove=false这个。El=Ext。get(El)；这个。渲染(这个。埃尔。多姆。父节点)；} 它最终调用的也是渲染，不过提出的位置是父节点，渲染方法如下(3.1.0版本是9370行)复制代码代码如下：渲染：函数（容器，位置){ if(！这个。呈现了这个。FireEvent('在渲染之前'，这个)！==false){ if(！集装箱这个。El){这个。El=Ext。得到(这个。El)；容器=这个。埃尔。多姆。ParentNodethis . allowommove=false } this . container=Ext . get(容器);如果(这个。{这个。集装箱。addclass(这个。ctcls} this.rendered=trueif(位置！==未定义){ if(Ext。is number(position)){ position=this。集装箱。多姆。子节点[位置]；} else { position=Ext。GetDom(位置)；} } this.onRender(this.container，position | | null)；如果(这个。车展){这个。埃尔。移除类([' x-hide '，' x-hide-' this。隐藏模式])；}如果(这个。{这个。埃尔。addCLaSS(这个。cls)；删除this.cls} if(this。样式){这个。埃尔。applystyles(这个。风格)；删除this.style} if(这个。这。埃尔。addclassionover(此。超频)；} this.fireEvent('render '，this)；var内容目标=这个。get content target()；如果(这个。html){ ContentTarget。最新消息(电话分机200 .dohelper。标记(这。html))；删除this.html；}如果(这个。内容El){ var ce=Ext。GetDom(这个。内容El)；Ext.fly .removeClass(['x-hidden '，' x-hide-display '])；内容TArGet。追加子级(ce)；} if (this.tpl) { if(！这个。第三方物流。编译){这个。第三方物流=新Ext .XTemplate(这个。第三方物流)；}如果(这个。数据){这个。TPL【这个。tplwrite mode](内容目标，此。数据)；删除this.data} } this。渲染后(这。容器)；如果(这个。隐藏){这个。DoHide()；}如果(这个。已禁用){此。禁用(真)；} if(this.stateful！==false){这个。initstatevents()；} this.fireEvent('afterrender '，this)；}退回这个；}渲染方法看起来比较复杂，仔细阅读下其实也不是太难，主要就是为一个数字正射影像图节点设置同学们，可见性，在在安德方法中会对这个组件生成相应的超文本标记语言代码。在对应用于和图表的页面显示容器的理解和思考中提到的埃尔配置属性，我查框架的文档发现这是一个只读属性，虽然有方法覆盖它，不过一般不需要手动设置，下面是面板的公共属性埃尔的文档原文：el : Ext .元素外部。封装该组件的元素。只读。这通常是一个由类的在安德方法创建的差异元素，但是可以使用自动El配置覆盖它。注意：在呈现此组件之前，此元素将不可用。所以我估计此文写的是以前版本的extjs。个人认为，el是紧包裹着框架组件的一个数字正射影像图节点，一般是由框架自己生成的，好像细胞膜一样，如果拨开了它，那么这个组件就不完整了，很可能会表现的不正常。而提出方法中的容器（也就是应用于中指定元素的父元素，渲染到中指定的元素),是该组件的父元素，这个容器中可以包括其他的超文本标记语言元素或者框架组件。综上所述，其实应用于和图表的页面显示容器没有很本质区别，只是提出的位置不同。