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编程中更加得心应手。