ExtJS学习之路第七步:contentEl与renderTo的区别
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo,这回我们从定义中区分。
在Panel的API中,
contentEl:String
指定一个现有的HTML元素或者id作为此组件的内容。
这个config选项是用来利用现有的HTML元素,并将其放置在一个新的组件的布局元素(它只是将指定的DOM元素移动到,已经被渲染的组件之中当内容使用)
注意:
在其他配置的HTML被插入到组件之后,指定的HTML元素被追加到组件的布局元素中,document中将不再包含此元素。
这个指定的HTML元素不参与到该组件的任何布局方案。仅仅是HTML。布局是在子项上操作的。可以增加x-hidden或者x-hide-display CSS类,防止内容的简短闪烁,然后才呈现到面板中。
renderTo: String/HTMLElement/Ext.Element
这个组件将被渲染到哪个元素,可以是Id指定元素、DOM元素或者已经存在的Element。
注意:如果Component组件是一个Container容器的子项,不要使用此选项。容器的布局管理器会渲染和管理其子项。
当你配置此项,就不需要调用render()方法了。
追溯:Ext.AbstractComponent中的render
当Container第一次渲染的时候,容器的子组件由容器的布局管理器(Layout Manager)渲染。
当一个新的子组件需要添加到已经被渲染的Container,你需要调用Container的doLayout刷新,导致未被渲染过的子组件被渲染呈现出来。这个必须的,这样你可以在需要时,仅
刷新布局一次添加多个组件。
当创建复杂的UI时,Container的布局管理器(layout manager)记住子项的大小和位置。如果你期网子项能够大小能够与用户交互响应,你必须给Container配置布局管理器,让它创建管理你新中的布局类型。
忽略Container的布局参数,你将使用基础布局管理器,不做别的就是把子组件顺序的放到Container中。这种情况下,没有大小和位置的呈现。
<div id ="content">
<h1>秘密</h1>
<p>成功者成功的要素不在于强干的能力,而在于一颗容得下世界的心。</p>
</div>
<div id = "wrap"></div>
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
id: 'frontcard',
width:200,
height: 300,
title:"Try",
bodyStyle: {
"background-color": "pink",
"border-width":"2px",
"padding":"10px"
},
renderTo: 'wrap',
contentEl:'content'
});
});
看到有的代码中还有applyTo,实验过,和renderTo是一样的功能,应该是早期版本中的用法。现在一直保留可以兼容。
参考文献
contentEL,renderTo, applyTo 释义与区别
ExtJS学习之路第七步:contentEl与renderTo的区别的更多相关文章
- ExtJS学习之路第五步:认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- 微软企业库5.0 学习之路——第七步、Cryptographer加密模块简单分析、自定义加密接口及使用—下篇
在上一篇文章中, 我介绍了企业库Cryptographer模块的一些重要类,同时介绍了企业库Cryptographer模块为我们提供的扩展接口,今天我就要根据这些 接口来进行扩展开发,实现2个加密解密 ...
- ExtJS学习之路第六步:深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
- ExtJS学习之路第八步:Window组件
一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...
- ExtJS学习之路第四步:看源码,实战MessageBox
可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...
- ExtJS学习之路第三步:理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...
- 微软企业库5.0 学习之路——第六步、使用Validation模块进行服务器端数据验证
前端时间花了1个多星期的时间写了使用jQuery.Validate进行客户端验证,但是那仅仅是客户端的验证,在开发项目的过程中,客户端的信息永远是不可信的,所以我们还需要在服务器端进行服务器端的验证已 ...
- 微软企业库5.0 学习之路——第八步、使用Configuration Setting模块等多种方式分类管理企业库配置信息
在介绍完企业库几个常用模块后,我今天要对企业库的配置文件进行处理,缘由是我打开web.config想进行一些配置的时候发现web.config已经变的异常的臃肿(大量的企业库配置信息充斥其中),所以决 ...
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——下篇
一.独立验证器 我上篇中我将AndCompositeValidator和OrCompositeValidator归为独立验证器,这2个验证器主要是为了第一类验证服务,可以进行多种验证组合在一起进行复杂 ...
随机推荐
- 信息安全系统设计基础实验四 20135210&20135218
北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级: 1352 姓名:程涵,姬梦馨 学号:20135210,20135218 ...
- [MCSM]Exponential family: 指数分布族
Exponential family(指数分布族)是一个经常出现的概念,但是对其定义并不是特别的清晰,今天好好看了看WIKI上的内容,有了一个大致的了解,先和大家分享下.本文基本是WIKI上部分内容的 ...
- js验证身份证号
/* * 身份证检测(格式.地区.生日.年龄范围) * code:检测字符串 rangeAge:年龄范围[格式为:25-55] * 返回值 0:为空 ,不为0则验证不通过 */ : : : : : : ...
- (旧)子数涵数·Flash——初识ActionScript
一.什么是AS(ActionScript) ActionScript,简称AS,中译为"动作脚本语言". 用于在Flash上实现一些光用Flash无法实现的功能. 在Flash界面 ...
- css的垂直居中
请先看博客:http://www.jb51.net/css/39629.html
- [BZOJ 1297][SCOI 2009]迷路(矩阵快速幂)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1297 分析:如果每条边的边权都是1,那么就相当于对邻接矩阵自乘T次(因为写一下递推式子 ...
- JavaScript事件---事件入门
内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. ...
- jQuery理解之(一)动画与特效
本节主要降级和学习jQuery的自动显隐,渐入渐出.飞入飞出.自定义动画等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏 ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- oracle-7参数文件的管理
参数文件的管理:1.参数文件的作用:记录数据库的配置的 (1)pfile ---> 文本文件 (2)spfile --->服务器的参数文件(二进制的) 两个参数文件的区别: pfile ...