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. DataGrid点击上下一页loading效果

    js添加显示loading和取消loading方法 function showtbloading() { var target = $("#GridView1"); if (tar ...

  2. HTML5 Geolocation

    http://diveintohtml5.info/geolocation.html http://msdn.microsoft.com/en-us/library/windows/apps/hh44 ...

  3. 今天把登陆注册给改成tab了

    真是解决了一个心头大患,本来以为必须请外包公司的工程师才做,自己研究了下也给解决了. 多亏去年做原型时学习了smarty.css.html这些最基本的网站前端开发的技术.FTP上传下载.linux的基 ...

  4. go与json

    Go语言对JSON进行编码和解码 http://outofmemory.cn/code-snippet/3766/Go-language-to-JSON-to-coding-jiema package ...

  5. 循环冗余校验（CRC）算法入门引导

    目录 写给嵌入式程序员的循环冗余校验CRC算法入门引导 前言 从奇偶校验说起 累加和校验 初识 CRC 算法 CRC算法的编程实现 前言 CRC校验(循环冗余校验)是数据通讯中最常采用的校验方式.在嵌 ...

  6. Android开源项目发现---ActionBar篇（持续更新）

    1. ActionBarSherlock 鼎鼎大名, 为Android所有版本提供统一的ActionBar,解决4.0以下ActionBar的适配问题 项目地址:https://github.com/ ...

  7. 方便的Chrome取色插件ColorPick Eyedropper [设计, FE必备]

    最近在和Design合作开发, 她发过来的原型图有各种各样色配色, 不想让她一个一个地标记颜色, 嫌效率低. 于是自己找到一款方便的Chrome取色插件, 叫做ColorPick Eyedropper ...

  8. clang failed with exit code 1 的常见情况

    1:文件重复,如生成了一份  xxx副本.m 2:reachablity.h 这个文件经常重复. 以上优先检查 .

  9. wps操作记录

    WPS Excel 1.点击插入---形状:画好方框,选中后右键“编辑文字”,在方框中加入你需要的文字信息 2.点击插入---形状:画出连接线,按住SHIFT拖动可以水平或垂直的直线 3.调整位置.选 ...

  10. eclipse 常用快捷键整理

    1.整理代码的快捷键ctrl+shift + F 2.跳转代码行ctrl+L 3.可以列出所有快捷键  Ctrl+Shift+L