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的差别的更多相关文章

  1. extjs笔记

      1.    ExtJs 结构树.. 2 2.    对ExtJs的态度.. 3 3.    Ext.form概述.. 4 4.    Ext.TabPanel篇.. 5 5.    Functio ...

  2. ExtJS笔记 Tree

    The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. ExtJS笔记5 Components

    参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of ...

  5. ExtJS笔记 Grids

    参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...

  6. ExtJS笔记 Form

    A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can ...

  7. ExtJS笔记4 容器与布局（Layouts and Containers）

    The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning ...

  8. ExtJS笔记3 MVC Architecture

    MVC Architecture   MVC架构 Contents File Structure Creating the application in app.js Defining a Contr ...

  9. ExtJs4学习（四）：Extjs 中id与itemId的差别

       为了方便表示或是指定一个组件的名称,我们一般会使用id或者itemId进行标识命名. (推荐尽量使用itemId.这样能够降低页面唯一标识而产生的冲突) id:   id是作为整个页面的Comp ...

随机推荐

  1. 解决Android SDK Manager更新(一个更新Host的程序的原理实现和源码)

    <ignore_js_op>     同学遇到了更新Android SDK的问题,而且Goagent现在也无法用来更新.就想到了用替代Host的方法,添加可用的谷歌地址来实现更新.    ...

  2. win7 安装SQL Server 2005 开发版 图文教程

    转自win7 安装SQL Server 2005 开发版 图文教程 ----------------------------写在安装前------------------------------ 一. ...

  3. 【网络流24题】No.11(航空路线问题 最长不相交路径 最大费用流)

    [题意] 给定一张航空图, 图中顶点代表城市, 边代表 2 城市间的直通航线. 现要求找出一条满足下述限制条件的且途经城市最多的旅行路线.(1) 从最西端城市出发,单向从西向东途经若干城市到达最东端城 ...

  4. poj3415

    很久以前写的,忘补结题报告了两串相连中间用特殊的分隔符然后求height,由于要求求公共子串大于等于k的个数,并且只要位置不同即可因此不难想到在名次上对height分组,一组内的height保证> ...

  5. bzoj1458

    题做多的话不难想到可能是以行列作为二分图两个点集,然后网络流相关 具体怎么弄呢 我们可以用求补集的思想,假设有解 我们先把棋盘能放的地方放满士兵,然后我们尽量的把士兵拿走 并且要满足行和列的要求, 说 ...

  6. Away3d 基础 1 ---对一个简单类的解释

    转自:http://www.cnblogs.com/nooon/archive/2009/05/16/1458334.html 原英文地址: http://www.flashmagazine.com/ ...

  7. HDU 5949 Relative atomic mass 【模拟】 （2016ACM/ICPC亚洲区沈阳站）

    Relative atomic mass Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  8. 如何利用预编译指令来判断Delphi 的版本转载

    条件符号 含义 VERxx 编译器版本,XX表示版本,例如:Delphi 1.0 的编译器版本为80.Delphi 5.0 的编译器版本为130WIN32 是否WIN32的运行环境(Windows 9 ...

  9. HDOJ --- 2084数塔

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. Jquery扩展- 倒计时

    Source Code (function($) { $.fn.countdown = function(options) { // default options var defaults = { ...