Ext applyTo和renderTo的区别和用法
extjs中经常会用到renderTo或applyTo配置选项。这里,我就比较下两者的区别与用法。
1、renderTo与render方法对应
2、applyTo与applyToMarkup方法对应
一、applyTo的使用:
1、applyTo所指向的el元素必须要有父节点。
2、applyTo所指向的el元素实际上是充当了对象要渲染的模板,对象是渲染在其父节点内。即对象实例化后所产生的html代码是插入在el元素的父节点内,而el元素本身将只作为模板,并不作为真正的在其位置上的元素,既然作为模板,只是利用其标签内的部分style和class,就不应该包含子节点(包括文本)。
3、这个作为模板的el元素很重要,必须是要存在的。
4、示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>applyTo与renderTo的区别</title>
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript"> Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"个人信息", width:300, height:300, frame:true, applyTo:"appConId" }); });
</script>
</head>
<body> <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;"> <div id="appConId" style="width:400px;height:400px;background-color:green;"></div> </div>
</body>
</html>
5、效果图:
此时,appConId元素作为了模板,其width样式并没有被应用上,而其他的height和background-color样式被应用上了。就相当于这个div被替换或改造了。
二、renderTo的使用:
1、可以有el配置选项。
2、如果有el配置选项,则其指向的el元素充当了模板,并且必须存在。
3、renderTo所指向的el元素将作为对象渲染的入口,即render所产生的html代码将作为renderTo所指向的el元素的子节点。
4、如果有el配置选项,那么render会将el配置选项所指向的el元素作为模板然后产生html代码作为renderTo所指向的el元素的子节点。
5、示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>applyTo与renderTo的区别</title>
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript"> Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"个人信息", width:300, height:300, frame:true, el:"elId", renderTo:"appConId" }); });
</script>
</head>
<body> <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;"> <div id="appConId" style="width:400px;height:400px;background-color:green;"></div> </div> <div id="elId" style="width:500px;height:400px;background-color:red;"> </div>
</body>
</html>
6、效果图:
Ext applyTo和renderTo的区别和用法相关推荐
- 对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 ...
- model.fit以及model.fit_generator区别及用法
model.fit以及model.fit_generator区别及用法_猫爱吃鱼the的博客-CSDN博客
- js中!和!!的区别及用法
js中!和!!的区别及用法 js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值, 1.!可将变量转换成boolean类型,null.undefined和 ...
- Python中threading的join和setDaemon的区别及用法 例子
Python中threading的join和setDaemon的区别及用法 Python多线程编程时,经常会用到join()和setDaemon()方法,今天特地研究了一下两者的区别. 1.join ...
- MySQL笔记10:engine=innodb和engine=myisam的区别和用法!
MYSQL中engine=innodb和engine=myisam的区别和用法! 区别 1.myisam类型不支持事务处理等高级处理,而innodb类型支持. 2.myisam类型的表强调的是性能,其 ...
- calloc、malloc、realloc函数的区别及用法
calloc.malloc.realloc函数的区别及用法! 三者都是分配内存,都是stdlib.h库里的函数,但是也存在一些差异. (1)malloc函数.其原型void *malloc(unsig ...
- 多线程:synchronize、volatile、Lock 的区别与用法
Java多线程之内存可见性和原子性:Synchronized和Volatile的比较 在说明Java多线程内存可见性之前,先来简单了解一下Java内存模型. (1)Java所有变量都存储在主内存中 ...
- 转 Java中final、finally、finalize的区别与用法
Java中final.finally.finalize的区别与用法 1.简单区别: final用于声明属性,方法和类,分别表示属性不可交变,方法不可覆盖,类不可继承. finally是异常处理语句结构 ...
- java replaceall函数_JAVA中string.replace和string.replaceAll的区别及用法
展开全部 JAVA中string.replace()和string.replaceAll()的区别及用法乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),32 ...
最新文章
- 2021中国大学排名发布:北京大学连续14年位居榜首
- 步入DevExpress的使用(VS)
- 小技巧:with用法 pycharm控制台输出带颜色的文字 打印进度条的
- 好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记
- P3295 [SCOI2016]萌萌哒(DP+倍增)
- Adobe illustrator 调整对象大小 - 连载 11
- mysql monitor用户_Mysql的用户基本操作
- python-组合数据类型
- php时间戳转换日期24,php时间戳怎么转换回日期
- 为什么要与下属建立良好的人际关系?
- Android Studio connot resolve symbol XXX 无法解析的符号
- linux下udp调试工具,linux tcp udp 调试工具
- 来拥抱星辰大海吧!中国风云气象卫星系列数字藏品荣耀首发
- Unity视频播放器插件AVProVideo的使用
- 湖南任务书 数据库服务渗透测试
- 试图加载格式不正确的程序 解决方法
- U-BOOT中文文档 概述与配置选项
- JMeter学习(四)使用JMeter的HTTP代理服务器实现抓包功能
- FileDetector-基于java开发的照片整理工具
- c语言最弱智的游戏,大行其道的“弱智”游戏