Ext:Panel之applyTo与renderTo区别
一、显示的问题
例如,我写了一行这样的代码,但是没有任何结果:
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的父亲。这个问题极容易搞错。
这儿的两个问题其实都是Ext.Component那里的。下一篇正式研究一下Ext.Panel的API了。
转自:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662824.aspx
Ext:Panel之applyTo与renderTo区别相关推荐
- Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空
Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空 Ext4.0.2 转载于:https://www.cnblogs.com/rav009/archive/2 ...
- ExtJs2.0学习系列--Ext.Panel
ExtJs2.0学习系列--Ext.Panel 2008-06-29 12:59 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的 ...
- ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
- 对applyTo和renderTo的理解和思考
extjs中经常会用到renderTo或applyTo配置选项.这里,我就比较下两者的区别与用法. 1.renderTo与render方法对应 2.applyTo与applyToMarkup方法对应 ...
- applyTo和renderTo配置项
对于applyTo和renderTo,我们在Ext 2.0的官方文档上可以看到, [quote]applyTo : Mixed The id of the node, a DOM node or an ...
- ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...
- 面板Ext.Panel使用
概要 1.Ext.Panel概述 2.面板的五大组成部分 3.面板的特点 4.面板中的内容 5.面板内容动态控制 6.API概述 1.Ext.Panel概述 面板Panel是ExtJS控件的基础,很多 ...
- extJs 2.0学习笔记(Ext.Panel篇四)
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...
- 面板panel与窗口frame的区别
面板panel与窗口frame的区别 References 都可以在其上加载组件 面板需要加载在组件上才能使用,而窗口不需要 JPanel和JFrame都可以作为容器存放别的控件 但JPanel一般作 ...
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
前言 经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件,这几个之间有什么关系,为什么Ext JS要提供这几种不同的方式? 官方解释 Conten ...
最新文章
- mybatis 解析Integer为0的属性,解析成空字符串
- Linux下arp用法
- VMware 创建开启虚拟机时候报错的解决方式
- r数据框计算字符出现次数_R语言系列第二期:①R变量、脚本、作图等模块介绍...
- oracle 10g安装企业版,企业版Oracle10g的安装-过程
- (转)正则表达式—RegEx(RegularExpressio)(三)
- 基于FaceNet人脸识别的人脸对比认证(一) -- 环境部署、认证实验
- Java扫雷游戏的设计与实现毕业设计论文
- 【STM32F407开发板用户手册】第14章 STM32F407的电源,复位和时钟系统
- 计算机原材料费,计算机基础考试原材料
- 《活出生命的意义》节选
- 第八十四章 Caché 函数大全 $ZDATEH 函数
- 学习数据库视频笔记4
- 存储系统性能影响因素(2)---固态硬盘
- vue实现 文件重命名
- 关于cookie的跨域(一级域)
- PentestBOX教程
- gx works2 存储器空间或桌面堆栈不足_手机存储不够怎么办?ORICO备份宝让你拥有无限扩容空间...
- 虽然中国超大城市的施工成本可能上升,但仍处于世界最便宜之列
- 从响应式编程到 Combine 实践