一、显示的问题

事实上,这个问题是所有组件的问题,凡是从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区别相关推荐

  1. Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空

    Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空 Ext4.0.2 转载于:https://www.cnblogs.com/rav009/archive/2 ...

  2. ExtJs2.0学习系列--Ext.Panel

    ExtJs2.0学习系列--Ext.Panel 2008-06-29 12:59 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的 ...

  3. ExtJs2.0学习系列(2)--Ext.Panel

    随笔- 71  文章- 10  评论- 1096  ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...

  4. 对applyTo和renderTo的理解和思考

    extjs中经常会用到renderTo或applyTo配置选项.这里,我就比较下两者的区别与用法. 1.renderTo与render方法对应 2.applyTo与applyToMarkup方法对应 ...

  5. applyTo和renderTo配置项

    对于applyTo和renderTo,我们在Ext 2.0的官方文档上可以看到, [quote]applyTo : Mixed The id of the node, a DOM node or an ...

  6. ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题

    Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...

  7. 面板Ext.Panel使用

    概要 1.Ext.Panel概述 2.面板的五大组成部分 3.面板的特点 4.面板中的内容 5.面板内容动态控制 6.API概述 1.Ext.Panel概述 面板Panel是ExtJS控件的基础,很多 ...

  8. extJs 2.0学习笔记(Ext.Panel篇四)

    我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...

  9. 面板panel与窗口frame的区别

    面板panel与窗口frame的区别 References 都可以在其上加载组件 面板需要加载在组件上才能使用,而窗口不需要 JPanel和JFrame都可以作为容器存放别的控件 但JPanel一般作 ...

  10. [Ext JS 4] contentEL,renderTo, applyTo 释义与区别

    前言 经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件,这几个之间有什么关系,为什么Ext JS要提供这几种不同的方式? 官方解释 Conten ...

最新文章

  1. mybatis 解析Integer为0的属性,解析成空字符串
  2. Linux下arp用法
  3. VMware 创建开启虚拟机时候报错的解决方式
  4. r数据框计算字符出现次数_R语言系列第二期:①R变量、脚本、作图等模块介绍...
  5. oracle 10g安装企业版,企业版Oracle10g的安装-过程
  6. (转)正则表达式—RegEx(RegularExpressio)(三)
  7. 基于FaceNet人脸识别的人脸对比认证(一) -- 环境部署、认证实验
  8. Java扫雷游戏的设计与实现毕业设计论文
  9. 【STM32F407开发板用户手册】第14章 STM32F407的电源,复位和时钟系统
  10. 计算机原材料费,计算机基础考试原材料
  11. 《活出生命的意义》节选
  12. 第八十四章 Caché 函数大全 $ZDATEH 函数
  13. 学习数据库视频笔记4
  14. 存储系统性能影响因素(2)---固态硬盘
  15. vue实现 文件重命名
  16. 关于cookie的跨域(一级域)
  17. PentestBOX教程
  18. gx works2 存储器空间或桌面堆栈不足_手机存储不够怎么办?ORICO备份宝让你拥有无限扩容空间...
  19. 虽然中国超大城市的施工成本可能上升,但仍处于世界最便宜之列
  20. 从响应式编程到 Combine 实践

热门文章

  1. 辩证看待倾向性评分法
  2. c语言数组存在哪个地方,C语言数组考点归纳
  3. SCI论文写作--科研其实远没有那么难
  4. iconfont 图标不显示
  5. 百度刷排名,刷流量,刷下拉软件【完全免费】胖虎图图-互动点击系统
  6. Ain_搜索引擎这样用才有效率
  7. 【分享】5s管理之实现仓库有效管理的7个步骤
  8. 手把手教你如何复现MS17-010永恒之蓝漏洞
  9. 支持向量回归(Support Vector Regression)
  10. 小程序 Vant Weapp 使用插槽自定义 Cell 的左侧图标