对applyTo和renderTo的理解和思考

最新推荐文章于 2017-03-21 16:47:20 发布
最新推荐文章于 2017-03-21 16:47:20 发布
阅读量1k 收藏 3
点赞数
分类专栏： XHTML、CSS、DIV、Javascript、AJAX 文章标签： stylesheet html function extjs div class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcj8/article/details/3982184
版权

 

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代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>applyTo与renderTo的区别</title>  
  6. <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>  
  7. <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>  
  8. <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>  
  9. <script type="text/javascript">  
  10.     Ext.onReady(function(){   
  11.         var _panel = new Ext.Panel({   
  12.             title:"个人信息",   
  13.             width:300,   
  14.             height:300,   
  15.             frame:true,   
  16.             applyTo:"appConId"   
  17.         });   
  18.     });   
  19. </script>  
  20. </head>  
  21. <body>  
  22.     <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;">  
  23.         <div id="appConId" style="width:400px;height:400px;background-color:green;"></div>  
  24.     </div>  
  25. </body>  
  26. </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代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>applyTo与renderTo的区别</title>  
  6. <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>  
  7. <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>  
  8. <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>  
  9. <script type="text/javascript">  
  10.     Ext.onReady(function(){   
  11.         var _panel = new Ext.Panel({   
  12.             title:"个人信息",   
  13.             width:300,   
  14.             height:300,   
  15.             frame:true,   
  16.             el:"elId",   
  17.             renderTo:"appConId"   
  18.         });   
  19.     });   
  20. </script>  
  21. </head>  
  22. <body>  
  23.     <div id="appId" style="padding:30px;width:500px;height:400px;background-color: blue;">  
  24.         <div id="appConId" style="width:400px;height:400px;background-color:green;"></div>  
  25.     </div>  
  26.     <div id="elId" style="width:500px;height:400px;background-color:red;">  
  27.     </div>  
  28. </body>  
  29. </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、效果图：
lcj8
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS初学——renderTo/applyTo区别
ˉ-_lishk_-ˉ
09-18 3116
a RenderTo and ApplyTo Ext.onReady(function () { var button = new Ext.Button({ applyTo: 'button', text:'OK' }); }); sadfa
Extjs学习 一个小细节renderTo和applyTo的区别
zhangfq123的专栏
10-28 375
<br /> <br />Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢，网上搜了下，有两篇博文也是关于这个的。<br />详细出处参考：http://www.jb51.net/article/21749.htm<br /><br />个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码， <br /><br />复制代码 代码如下:<br /><head> <br /><tit
renderTo和applyTo的区别
点滴的积累，让自己成长
07-20 610
Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢？ 个人认为这两篇文章写的不够通俗。 写一个简单的例子来看看最终生成了什么代码。 &lt;head&gt; &lt;title&gt;RenderTo and ApplyTo&lt;/title&gt; &lt;link rel=...
Ext applyTo和renderTo的区别和用法
Coder Jiang
03-27 2570
extjs中经常会用到renderTo或applyTo配置选项。这里，我就比较下两者的区别与用法。 1、renderTo与render方法对应 2、applyTo与applyToMarkup方法对应 一、applyTo的使用： 1、applyTo所指向的el元素必须要有父节点。 2、applyTo所指向的el元素实际上是充当了对象要渲染的模板，对象是渲染在其父节点内。即对象实例化后所
ExtJS笔记--applyTo和renderTo的区别
wjt276的专栏
09-11 149
extjs中经常会用到renderTo或applyTo配置选项。这里，我就比较下两者的区别与用法。1、renderTo与render方法对应2、applyTo与applyToMarkup方法对应一、applyTo的使用：1、applyTo所指向的el元素必须要有父节点。2、applyTo所指向的el元素实际上是充当了对象要渲染的模板，对象是渲染在其父节点内。即对象实例化后所产生的html代码是插入...
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
10-29
值得注意的是，如果同时设置了 `applyTo` 和 `renderTo`，`applyTo` 将优先生效，这在ExtJS的文档中也有明确说明。 `applyToMarkup` 方法实际上最终也是调用了 `render` 方法，但它的位置是在父元素（parentNode）...
js中apply和call的理解与使用方法
10-15
主要给大家介绍了关于js中apply和call的理解与使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
彻底搞懂JavaScript中的apply和call方法(必看)
10-19
总的来说，`apply`和`call`是JavaScript中两个非常实用的方法，它们使得函数能够灵活地改变执行环境，实现代码的复用和动态绑定，对于理解和编写复杂的JavaScript代码至关重要。掌握这两个方法有助于提升JavaScript...
javascript利用apply和arguments复用方法
10-26
JavaScript中的`apply`和`arguments`对象是两个非常重要的特性，它们在函数复用和处理动态参数时起着关键作用。本文将详细讲解这两个概念及其在复用方法中的应用。 `apply`是JavaScript中Function对象的一个方法，...
render_to_response第二个参数问题
tjlakewalker的专栏
07-15 5946
在学习django中，render_to_response的第一个参数为模板名称，比如/home/yang/mysite/templates下的文件mytemp.html，第二个参数为字典。例如:render_to_response('mytemp.html', {'curren
ext renderto
周厉的技术人生
03-21 2166
renderto是加载元素的意思 如果你是renderTo:'test'的话~ 你jsp里边就要有个div 的id是test 如果是renderto:Ext.getBody()的话 就是加载jsp body的时候就加载ext
ExtJS学习之路第七步：contentEl与renderTo的区别
02-21 143
上回在Panel的应用中我们应该能大致区分开conteEl和renderTo，这回我们从定义中区分。 在Panel的API中， contentEl:String指定一个现有的HTML元素或者id作为此组件的内容。这个config选项是用来利用现有的HTML元素，并将其放置在一个新的组件的布局元素(它只是将指定的DOM元素移动到，已经被渲染的组件之中当内容使用)注意：在其他配置的HTM...
[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
热门推荐
oscar999的专栏
07-16 1万+
经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件，这几个之间有什么关系，为什么Ext JS要提供这几种不同的方式
django render和render_to_response()
shaququ的博客
07-08 8217
django render和render_to_response()
也没有Apply to each
最新发布
06-07
如果您的 Power Automate 中没有 "Apply to each" 操作，您可以使用 "Until" 循环来实现对多个 ZIP 文件的解压缩。以下是具体步骤： 1. 创建一个新的流程，并添加 "获取文件路径" 操作，选择您要解压缩的文件夹。 2. 添加 "Until" 操作，并设置条件为：当文件夹中没有 ZIP 文件时退出循环。 3. 在 "Until" 操作中，添加 "解压缩文件" 操作，并将文件的路径作为输入。 4. 在 "解压缩文件" 操作中，添加 "Get files (properties only)" 操作，选择您要解压缩的文件夹，并设置筛选条件为：文件扩展名为 ".zip"。 5. 添加 "Condition" 操作，判断是否有 ZIP 文件。如果有，那么将文件的路径输出到 "解压缩文件" 操作中进行解压缩。 6. 最后，保存并运行流程，即可对指定文件夹下的所有 ZIP 文件进行解压缩。 在这个流程中， "Until" 操作用于循环检查文件夹中是否还有 ZIP 文件，直到没有为止。然后在 "解压缩文件" 操作中，使用 "Get files (properties only)" 操作来获取文件夹中的所有 ZIP 文件，再通过 "Condition" 操作进行筛选和判断。 希望这能够帮到您。如果您还有其他关于 Power Automate 的问题，可以继续向我提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值