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、效果图：
分享到：
看不懂，能不能用通俗点说明下？
相关推荐
通过将游戏理论的形式化方法应用于RRM问题，并识别出适合的模型，可以将一些目前主要依赖于模拟手段解决的困难RRM问题转化为易于理解和分析的问题。这样做的目的是使这些原本复杂的问题变得像“低垂的果实”一样易于...
理解$watch，$apply和$digest的工作原理对于优化AngularJS应用性能至关重要。通过避免不必要的$apply调用，减少$watch的数量，以及合理安排异步操作，可以显著提高应用的响应速度。 总结起来，$watch用于监听模型...
How do I apply to become a PAAPAI CA.msg
SQL Server中的CROSS APPLY和OUTER APPLY是两种特殊的表运算符，它们在2005版本及以上引入，主要用于处理复杂的数据转换和联接操作。这些运算符的主要区别在于如何处理右表表达式的结果。 CROSS APPLY用于执行内联...
### 理解JavaScript中的`caller`...综上所述，理解`caller`、`callee`、`call`、`apply`以及`arguments`对象在JavaScript编程中至关重要，它们不仅增强了函数的灵活性和复用性，还提供了深入分析和调试代码的强大工具。
How to apply for PMP certification? It is easy to make it following the several step and points in the file.
**Cutback - Auto Apply To Jobs-crx插件详解** Cutback - Auto Apply To Jobs是一款专为求职者设计的Chrome浏览器扩展程序，它旨在简化在线求职流程，尤其适用于那些正在大量投递简历的求职者。这款插件的核心功能...
JavaScript中call与apply方法
这个方法对于理解和操作JavaScript中的函数和对象关系至关重要。 在JavaScript中，每个函数都有`call()`和`apply()`这两个方法，它们都可以改变函数执行时的上下文，并传入参数。`apply()`的独特之处在于，它可以...
安装好原程序，了世哪个汉化文件《Renderin》放到C:\Program Files\Google\Google SketchUp 8\Plugins\Renderin目录下替换原文件，打开SU8在插件下Renderin菜单点License，在弹出的窗口输入号码，点Apply等一会在...
总的来说，理解`apply`和`use`在不同上下文中的含义是提升Java和其他函数式编程语言技能的关键。它们提供了一种更高级别的抽象，使得代码更加简洁和易于理解。在实践中，结合源码阅读和使用相关的工具，可以更深入地...
06 How to apply SOVD
在R语言中，避免使用for循环是一种常见的优化策略，因为R对循环的处理效率较低，且循环可能导致代码难以理解和维护。`apply()`家族和`plyr`包提供了更为高效和简洁的数据处理方法。 `apply()`函数是R中的一个基础...
在"Matlab Tutorial - 42 - Apply Mathematical Functions to Matrices"这个教程中，我们将深入探讨如何对矩阵应用数学函数，以实现各种计算任务。Matlab提供了丰富的内置函数，使得在矩阵上执行算术、逻辑和复杂...
首先，我们需要理解apply和call方法的基本概念。在JavaScript中，函数作为一等公民，拥有自己的上下文环境，也就是我们常说的this值。在不同的执行上下文中，函数的this值会有所不同，而apply和call方法正是用于在...
在JavaScript的世界里，caller、callee、call和apply是四个非常重要的概念，它们涉及到函数的调用方式和执行上下文。这些知识点对于深入理解和优化代码至关重要，尤其在处理高阶函数和面向对象编程时。 首先，让...
在JavaScript中，`apply()`和`call()`方法都是用于改变函数调用时的上下文（即`this`关键字指向的对象）以及传递参数。这两个方法都隶属于`Function.prototype`，因此所有函数实例都拥有这两个方法。它们的主要作用...
总结来说，`caller`和`callee`提供了对函数调用栈的洞察，而`call`和`apply`则提供了更灵活的函数调用方式，包括改变`this`的指向和动态传递参数。理解和熟练运用这些特性，将使你在JavaScript编程中更加得心应手。