对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、示例代码：

Html代码

<!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>

<!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、示例代码：

Html代码

<!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>

<!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、效果图：

对applyTo和renderTo的理解和思考相关推荐

【边缘计算】对边缘计算的理解与思考
来源:边缘计算社区在2019年第三届边缘计算技术研讨会上华为高级产业发展经理.ECC需求与总体组副主席黄还青发表了<ECC及华为在边缘计算领域的思考与实践>主题演讲,本文为黄还青演讲中对 ...
远离“数据呆” 对业务的理解和思考永远高于分析技术的选择
随着数据积累得越来越多,数据获取成本不断降低,人们开始走向另一个危险的极端,那就是任何事情都要看数据,任何决定都去依赖数据. 这种风气培养出了越来越多的"数据呆".作为一个数据分析 ...
关于PSINS运动轨迹仿真模块的理解和思考
文章目录坐标系定义飞行轨迹设计 1. 飞行轨迹类型 2. 相关代码 (1) test_SINS_trj.m (2) trjsegement.m (3) trjsimu.m 疑问与思考本篇博客主要 ...
applyTo和renderTo配置项
对于applyTo和renderTo,我们在Ext 2.0的官方文档上可以看到, [quote]applyTo : Mixed The id of the node, a DOM node or an ...
演讲实录丨胡郁从“能听会说”到“能理解会思考”-以语音和语言为入口的认知革命...
从"能听会说"到"能理解会思考" -以语音和语言为入口的认知革命胡郁中国人工智能学会企业副理事长.科大讯飞轮值总裁胡郁:我主要分享三个方面内容:关于人工智 ...
演讲稿丨胡郁从“能听会说”到“能理解会思考”——以语音和语言为入口的认知革命...
今天非常高兴能够借人工智能60周年纪念活动的机会,和大家进行交流.我今天报告的题目是"从能听会说"到"能理解会思考".因为在过去的几年当中,其实我们讨论人工智能 ...
对在线教育的理解与思考
随着互联网的不断发展,在线教育也经历了从远程教育平台.培训机构转战线上,到目前的互联网公司涉足在线教育三个阶段,在这一发展过程中,在线教育的形式和内容越来越多样化,便利程度也在不断提高,越来越多的消费 ...
谈谈对IOC及DI的理解与思考
一.前言在实际的开发过程中,我们经常会遇到这样的情况,在进行调试分析问题的时候,经常需要记录日志信息,这时可以采用输出到控制台. 因此,我们通常会定义一个日志类,来实现输出日志. 定义一个生成验证的 ...
结构化思维的理解与思考
结构化思维是一种将信息要素从无效转化为有序,提炼核心要点,将信息转化为有结构的知识,更好的帮助大脑理解和记忆,并支持我们清晰表达的通用能力. 前言首先,我们先来完成一个游戏,以下有9个计算式,大家顺 ...

对applyTo和renderTo的理解和思考

对applyTo和renderTo的理解和思考相关推荐

最新文章

热门文章