ExtJS笔记--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代码
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>
<!--EndFragment-->
二、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>
ExtJS笔记--applyTo和renderTo的差别的更多相关文章
- extjs笔记
1. ExtJs 结构树.. 2 2. 对ExtJs的态度.. 3 3. Ext.form概述.. 4 4. Ext.TabPanel篇.. 5 5. Functio ...
- ExtJS笔记 Tree
The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...
- ExtJS笔记 Using Events
Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...
- ExtJS笔记5 Components
参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of ...
- ExtJS笔记 Grids
参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...
- ExtJS笔记 Form
A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can ...
- ExtJS笔记4 容器与布局（Layouts and Containers）
The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning ...
- ExtJS笔记3 MVC Architecture
MVC Architecture MVC架构 Contents File Structure Creating the application in app.js Defining a Contr ...
- ExtJs4学习（四）：Extjs 中id与itemId的差别
为了方便表示或是指定一个组件的名称,我们一般会使用id或者itemId进行标识命名. (推荐尽量使用itemId.这样能够降低页面唯一标识而产生的冲突) id: id是作为整个页面的Comp ...
随机推荐
- 修改tabbar 字体颜色
NSDictionary *seletedTextAttrs = @{NSForegroundColorAttributeName:[UIColor orangeColor]}; 修改tabbar 字 ...
- IEEE二进制浮点数算术标准（IEEE 754）
整理自IEEE 754 IEEE二进制浮点数算术标准(IEEE 754)是20世纪80年代以来最广泛使用的浮点数运算标准,为许多CPU与浮点运算器所采用.这个标准定义了表示浮点数的格式(包括负零-0) ...
- 制作qtopia-2.2.0和qt4文件系统
转自 rootfs_qtopia_qt4.img 1. 解压rootfs_qtopia_qt4-20100816.tar.gz,得到目录rootfs_qtopia_qt4,里面内容比较大,超过了64M ...
- java WebService简单使用案例
首先,建立一个WebService: package garfield; import javax.jws.WebService; import javax.xml.ws.Endpoint; @Web ...
- leetcode面试准备:Valid Anagram
leetcode面试准备:Valid Anagram 1 题目 Given two strings s and t, write a function to determine if t is an ...
- linux内核--进程地址空间（三）
引言:上篇博文中,我们简单的介绍了Linux虚拟存储器的概念及组成情况,下面来分析分析进程的创建和终结及跟进程地址空间的联系. 这里首先介绍一个比较重要的概念:存储器映射 在Linux系统中,通过将一 ...
- perl 对象
唯一标识: 很明显,一个%employee 是不够的,每个雇员都要求有一个唯一标识和他或她自己的属性集合. 你可以动态的分配这个数据结构,也可以返回一个指向局部数据结构的引用 Vsftp:/root/ ...
- oracle查询转换_inlist转换
oracle的optimizer会对一些sql语句进行查询转换,比如: 合并视图 子查询非嵌套化 inlist转换 下面讲讲遇到的in list转化优化的案例: create table test( ...
- POJ_3280_Cheapest_Palindrome_(动态规划)
描述 http://poj.org/problem?id=3280 n 种小写字母构成长度为 m 的串,现在要通过增删字母使串回文,给出每种字母增和删的费用,求最小花费. Cheapest Palin ...
- 用SQL描述树
/*40条(1层) SELECT COUNT(*) FROM t01_mwfl WHERE AZFSDM=01 AND LEVEL=1 START WITH PID=0 CONNECT BY PRIO ...