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. 转:如何制作一个定制的 PHP 基础 Docker 镜像（一）

    原文来自于:http://open.daocloud.io/ru-he-zhi-zuo-yi-ge-ding-zhi-de-php-ji-chu-docker-jing-xiang/ 目标:准备一个定 ...

  2. Gabor变换

    Gabor变换 Gabor变换属于加窗傅立叶变换,Gabor函数可以在频域不同尺度.不同方向上提取相关的特征.另外Gabor函数与人眼的生物作用相仿,所以经常用作纹理识别上,并取得了较好的效果.Gab ...

  3. ANDROID_MARS学习笔记_S02重置版_001_Hander\Looper\Message\Thread\ThreadLocal

    一. * class LooperThread extends Thread { * public Handler mHandler; * * public void run() { * Looper ...

  4. EMMC 简要介绍

    一直想写一篇关于EMMC的文章,但是因为之前弄了很多PPT,所以一直提不起兴趣,索性直接把之前的一个介绍EMMC的PPT贴出来给大家看看,有什么问题可以直接跟帖,我会第一时间进行解答,谢谢

  5. 【Spring】Spring IOC原理及源码解析之scope=request、session

    一.容器 1. 容器 抛出一个议点:BeanFactory是IOC容器,而ApplicationContex则是Spring容器. 什么是容器?Collection和Container这两个单词都有存 ...

  6. 两个有关Knockout自定义拓展方法fn的小技巧

    Adding custom functions using "fn" 让observable自增/自减 最简单的方法是self.num(self.num() + 1), 但是这个写 ...

  7. [LeetCode] 315. Count of Smaller Numbers After Self (Hard)

    315. Count of Smaller Numbers After Self class Solution { public: vector<int> countSmaller(vec ...

  8. just so you're clear

    The Google Resume的第一句话是: Just so you're clear: it was not my idea to give a talk to Microsoft Resear ...

  9. IronPython 源码剖析系列（2）：IronPython 引擎的运作流程

    http://blog.csdn.net/inelm/article/details/4612987 一.入口点 Python 程序的执行是从 hosting 程序 ipy.exe 开始的,而他的入口 ...

  10. BZOJ_3670_[NOI2014]_动物园_(kmp)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3670 对于一个字符串,求出num数组,其中num[i]表示前i个字符构成的字串中不相重合的相同 ...