[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
来源:互联网 发布:(n-2)的阶层的算法 编辑:程序博客网 时间:2024/05/25 08:11
前言
经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件,这几个之间有什么关系,为什么Ext JS要提供这几种不同的方式?
官方解释
ContentEL
从Ext.AbstractComponent这个类开始有这个配置。
使用一个已存在的HTML元素,或者是这个元素的id 来作为某个组件的的内容。(是在组件渲染后加入)
需要注意的是:
在render事件触发的时候,在文档中还找不到这个元素。这个HTML元素不会参与组件使用的布局方案。
为了防止添加进面板时出现短期的闪烁, 最好时添加 x-hidden或是x-hide-display 的CSS 类。
renderTo
从Ext.AbstractComponent这个类开始有这个配置。
指定某个组件要渲染的元素的id 或是DOM元素。
注意:
如果这个组件将会是一个容器的子项的话,不要使用这个配置选项。因为它负责了容器的布局管理器的渲染和管理子项的任务。
使用这个配置,不需要呼叫 render()
ContentEl VS renderTo
这两者的可比性不强, 因为使用的目的完全不同。
contentEl是在Ext的组件中插入HTML的元素。而renderTo则是在HTML的元素中插入Ext 的组件。
所以,强制使用到这两个的配置的状况也是可以的, 类似:
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head><title> New Document </title><META NAME="Author" CONTENT="oscar999"><script type="text/javascript" src="extjs/ext-all.js"></script><link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" /><script>Ext.onReady(function(){Ext.create('Ext.panel.Panel', { title: 'Hello', width: 200, html: 'Hello World!', contentEl: 'content', renderTo: 'content-div'}); });</script></head><body><div id="content">111111</div><div id="content-div"></div></body></html>
这里会把 id 为content 的内容移到 content-div 下面, 所以注意这里有个移动的操作。
applyTo VS renderTo
其实在Ext JS4 中已经取消这个配置选项了,但是为了和以前版本兼容,还是可以使用的。 使用的效果是完全一样的,都是把component 产生的内容插入到HTML的元素中。看例子:
<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head><title> New Document </title><META NAME="Author" CONTENT="oscar999"><script type="text/javascript" src="extjs/ext-all.js"></script><link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" /><script>Ext.onReady(function(){Ext.create('Ext.Button', { renderTo: 'render-div', text : 'Click me', scale : 'large'});Ext.create('Ext.Button', { renderTo: 'apply-div', text : 'Click me', scale : 'large'}); });</script></head><body><div id="render-div">render-div</div><div id="apply-div">apply-div</div></body></html>
网络上有说这两者使用的效果不同(component产生内容放置的位置不一样)
http://www.cnblogs.com/yinzixin/archive/2010/01/06/1640233.html
不过这篇文章使用的是Ext JS 3版本,不知道是否是在 Ext JS 4中统一了。
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
- Ext:Panel之applyTo与renderTo区别
- Ext:Panel之applyTo与renderTo区别
- applyTo and renderTo区别
- Ext applyTo和renderTo的区别和用法
- ExtJS初学——renderTo/applyTo区别
- ExtJS学习之路第七步:contentEl与renderTo的区别
- Extjs学习 一个小细节renderTo和applyTo的区别
- el与contentEl区别
- ext renderto
- ExtJs:el与contentEl区别
- ExtJs:el与contentEl区别
- ExtJs:el与contentEl区别
- ExtJs:el与contentEl区别
- ExtJs:el与contentEl区别
- ExtJS中的renderTo何applyTo的差别
- Extjs学习笔记之五——一个小细节renderTo和applyTo的区别 作者:Katmaier 来源:博客园
- mysqlreport指南
- sizeof() 类大小,空类大小
- linux LVM逻辑卷配置过程详解(增加,减少)
- CAP原理与最终一致性 强一致性 透析
- 嵌入式GSM短信息接口的软硬件设计
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
- Java 中 数值交换的几种方法
- JQuery性能优化
- ImageButton添加按下的动画效果 变亮或变暗
- 统计数组中 某个值出现的概率
- 提升C++大量赋值性能
- sicily 1003. Hit or Miss
- c语言的头号标志性文件——头文件
- extjs4验证码