- 浏览: 1091724 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
Extjs的组件有两个看起来类似的配置项,applyTo和renderTo,这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢,网上搜了下,有两篇博文也是关于这个的。
ExtJS中的renderTo和applyTo的差别
http://hi.baidu.com/agzfsshohpcdegr/item/50370f1912dc05e39813d6d8
对applyTo和renderTo的理解和思考
http://yahaitt.iteye.com/blog/249444
个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码,
此代码生成的html如下:
如果是applyTo:button,则生成的代码为:
很明显,简单的说,applyTo是将组件加在了指定元素之后,而renderTo则是加在指定元素之内。
接下来,我们再稍稍探寻下extjs源码的奥秘。看看extjs内部是如何使用这两个配置项的,利用firebug插件调试一下ext-all-debug.js这个文件。
在Ext.Component的构造函数Ext.Component = function(config){…}中有这样一段代码(3.1.0版本是9270行):
可见applyTo属性使得Component调用applyToMarkup方法,而renderTo使得它调用render方法,并且如果两个都设置的话仅有applyTo有效,这点在extjs的文档中也有特别指出。
appylToMarkup方法如下(3.1.0版本是9560行),
它最终调用的也是render,不过render的位置是parentNode,render方法如下(3.1.0版本是9370行)
render方法看起来比较复杂,仔细阅读下其实也不是太难,主要就是为一个DOM节点设置class,可见性,在onRender方法中会对这个组件生成相应的html代码。
在 对applyTo和renderTo的理解和思考 中提到的el配置属性,我查extjs的文档发现这是一个只读属性,虽然有方法覆盖它,不过一般不需要手动设置,下面是Panel的公共属性el的文档原文:
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only.
This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
所以我估计此文写的是以前版本的extjs。个人认为,el是紧包裹着extjs组件的一个DOM节点,一般是由extjs自己生成的,好像细胞膜一样,如果拨开了它,那么这个组件就不完整了,很可能会表现的不正常。而render方法中的container(也就是applyTo中指定元素的父元素,renderTo中指定的元素),是该组件的父元素,这个container中可以包括其他的html元素或者extjs组件。
综上所述,其实applyTo和renderTo没有很本质区别,只是render的位置不同。
-------------------------------------------------------------------
转载:
http://www.jb51.net/article/21749.htm
--
ExtJS中的renderTo和applyTo的差别
http://hi.baidu.com/agzfsshohpcdegr/item/50370f1912dc05e39813d6d8
对applyTo和renderTo的理解和思考
http://yahaitt.iteye.com/blog/249444
个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码,
<head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> <script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var button = new Ext.Button({ renderTo: 'button', text:'OK' }); }); </script> </head> <body> <div id="button">sadfa</div> </body> </html>
此代码生成的html如下:
如果是applyTo:button,则生成的代码为:
很明显,简单的说,applyTo是将组件加在了指定元素之后,而renderTo则是加在指定元素之内。
接下来,我们再稍稍探寻下extjs源码的奥秘。看看extjs内部是如何使用这两个配置项的,利用firebug插件调试一下ext-all-debug.js这个文件。
在Ext.Component的构造函数Ext.Component = function(config){…}中有这样一段代码(3.1.0版本是9270行):
if(this.applyTo){ this.applyToMarkup(this.applyTo); delete this.applyTo; }else if(this.renderTo){ this.render(this.renderTo); delete this.renderTo; }
可见applyTo属性使得Component调用applyToMarkup方法,而renderTo使得它调用render方法,并且如果两个都设置的话仅有applyTo有效,这点在extjs的文档中也有特别指出。
appylToMarkup方法如下(3.1.0版本是9560行),
applyToMarkup : function(el){ this.allowDomMove = false; this.el = Ext.get(el); this.render(this.el.dom.parentNode); }
它最终调用的也是render,不过render的位置是parentNode,render方法如下(3.1.0版本是9370行)
render : function(container, position){ if(!this.rendered && this.fireEvent('beforerender', this) !== false){ if(!container && this.el){ this.el = Ext.get(this.el); container = this.el.dom.parentNode; this.allowDomMove = false; } this.container = Ext.get(container); if(this.ctCls){ this.container.addClass(this.ctCls); } this.rendered = true; if(position !== undefined){ if(Ext.isNumber(position)){ position = this.container.dom.childNodes[position]; }else{ position = Ext.getDom(position); } } this.onRender(this.container, position || null); if(this.autoShow){ this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]); } if(this.cls){ this.el.addClass(this.cls); delete this.cls; } if(this.style){ this.el.applyStyles(this.style); delete this.style; } if(this.overCls){ this.el.addClassOnOver(this.overCls); } this.fireEvent('render', this); var contentTarget = this.getContentTarget(); if (this.html){ contentTarget.update(Ext.DomHelper.markup(this.html)); delete this.html; } if (this.contentEl){ var ce = Ext.getDom(this.contentEl); Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); contentTarget.appendChild(ce); } if (this.tpl) { if (!this.tpl.compile) { this.tpl = new Ext.XTemplate(this.tpl); } if (this.data) { this.tpl[this.tplWriteMode](contentTarget, this.data); delete this.data; } } this.afterRender(this.container); if(this.hidden){ this.doHide(); } if(this.disabled){ this.disable(true); } if(this.stateful !== false){ this.initStateEvents(); } this.fireEvent('afterrender', this); } return this; }
render方法看起来比较复杂,仔细阅读下其实也不是太难,主要就是为一个DOM节点设置class,可见性,在onRender方法中会对这个组件生成相应的html代码。
在 对applyTo和renderTo的理解和思考 中提到的el配置属性,我查extjs的文档发现这是一个只读属性,虽然有方法覆盖它,不过一般不需要手动设置,下面是Panel的公共属性el的文档原文:
el : Ext.Element
The Ext.Element which encapsulates this Component. Read-only.
This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.
Note: this element will not be available until this Component has been rendered.
所以我估计此文写的是以前版本的extjs。个人认为,el是紧包裹着extjs组件的一个DOM节点,一般是由extjs自己生成的,好像细胞膜一样,如果拨开了它,那么这个组件就不完整了,很可能会表现的不正常。而render方法中的container(也就是applyTo中指定元素的父元素,renderTo中指定的元素),是该组件的父元素,这个container中可以包括其他的html元素或者extjs组件。
综上所述,其实applyTo和renderTo没有很本质区别,只是render的位置不同。
-------------------------------------------------------------------
转载:
http://www.jb51.net/article/21749.htm
--
发表评论
-
Ext 布局
2014-06-09 14:16 8861、card layout. //a util funct ... -
Ext之自定义组件,之ComboBox之Ajax查询
2014-02-26 11:07 1222//类型 var sto = new Ext.data. ... -
Ext之自定义组件,之Render
2014-02-24 14:59 1271/** * 数据字典 代码到名称的翻译 * autho ... -
Ext之grid增加多行tbar
2014-01-23 10:02 1898tbar:[insertButton,'-',upda ... -
Ext之控制grid的下边缘显示
2014-01-22 12:40 895需要将 margins写成 margins:'0 0 0 0 ... -
Ext之JsonStore读取本地json文件
2014-01-21 16:03 7483方法一: //用于选择的Grid var ... -
Ext之comboBox 本地数据字典
2014-01-21 15:54 1366//车辆状态(值固定,写在前台页面,不用后台数据字典) ... -
Ext 带提示信息的 textField
2013-11-18 15:31 37181、 UpengsTextfield = Ext.exten ... -
ext之读取本地数据ComboBox
2013-11-11 14:41 17021、数据来自 json 文件 var record2=E ... -
ext之增加多行tbar
2013-11-07 11:55 1090tbar:[insertButton,'-',updateB ... -
ext之grid翻页空白参数丢失
2013-10-26 18:43 15241、问题现场 有2个grid, 第二个gri ... -
ext无法显示Label
2013-10-23 17:27 898把 layout 设为 'form' 只有用这个布局才能 ... -
Ext设置autoScroll:true了,为什么不起作用
2013-10-23 16:32 1866原因: 没有设height 首先 要设置一个高度 he ... -
Ext 事件添加,覆盖问题
2013-09-09 10:21 8891、对于事件 重复使用on ,添加事件: for(var i ... -
Ext移除元素的方法注意
2013-09-05 11:41 2594核心:采用从n-1 到 0 递减遍历; 而不是采用从 0 到 ... -
Ext checkbox 获取boxLabel 的值
2013-09-03 11:22 17191.fieldset(checkbox) 获取值 复选框组件 ... -
Ext自定义事件之——addEvents()
2013-08-26 11:33 1820Ext遵循一种树状的事件模型。 所有继承自Ext.util.O ... -
Ext 获取render后的值
2013-08-24 17:33 1422// var rows = grid.get ... -
怎样在Ext.Button中增加图标
2013-08-06 16:42 6888ExtJs的每一个组件(Component)在初始化的时候,都 ... -
Ext.util.Observable用法
2013-08-01 16:55 3668Ext.util.Observable 闲话不说,先来段说明 ...
相关推荐
ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码, 代码如下: <head> <title>RenderTo and ApplyTo</...
ext js 4.1apply && override
Ext4,Ext3的特点和区别
if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) { var fd=Ext.get('frmDummy'); if (!fd) { fd=Ext.DomHelper.append(Ext.getBody(),{tag:'form',method:'post',id:'frmDummy'...
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
asdext extext extext extext extext extext extext extext extext extext extext extext extext extext ext
包含3个工具:make_ext4fs、simg2img、kusering.sh。 1. 解压system.img为system.img.ext4。命令:simg2img system.img system.img.ext4 2. 创建system.img.ext4挂载目录tmp; 命令:mkdir tmp; 3. 挂载system....
ext资料 ext资料 ext资料 ext资料 ext资料
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
Ext.get与Ext.fly的区别与用法
ext JS 源码和学习资料,包含ext-3.2.0,ext3.3.1,ext4等多个版本源码,包含多个版本中文API和实用学习pdf
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试
Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1
支持Ext2/Ext3/Ext4, HFS 和 ReiserFS,只读。 There are a number of evident merits of the program, which you should know. First of all,DiskInternals Linux Reader is absolutely free. Secondly, the ...
分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询...
可以读写Ext2/Ext3文件系统,不支持Ext4文件系统和LVM。 在Windows7下,安装文件Ext2Fsd-0.51.exe需要设置为管理员运行和兼容WindowsXP SP3模式。 Ext2Fsd is an ext2 file system driver for Windows (2k, XP, ...