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. 使用自定义《UIActivity》进行内容分享－b

    简介 这段时间有很多朋友都问我关于怎么去集成ShareSDK或者友盟社会化分享SDK的问题, 其实我想说, Apple一开始就提供了一个类, 供我们去使用分享了, 在iOS 6之后更加增强了这个类, ...

  2. C# 网页自动填表自动登录(转)

    自动填表的方式有很多,关键是获取控件的id或者name. 比如源代码有 <input id="pwdInput" tabindex="2" class=& ...

  3. ASP.NET Web API 2 入门(一)

    前言 HTTP 不是只是为了服务的 web 页.这也是建设公开服务和数据的 Api 的强大平台.HTTP 是简单的. 灵活的和无处不在.你能想到的几乎任何平台有 HTTP 库,因此,HTTP 服务可以 ...

  4. ARP 实现

    ARP 实现 现在我们介绍一下arp的实现,内核版本2.6.24. [数据结构] 协议栈通过ARP协议获取到的网络上邻居主机的IP地址与MAC地址的对应关 系都会保存在这个表中,以备下次与邻居通讯时使 ...

  5. Android 性能优化 四 布局优化merge标签的使用

    小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...

  6. 灰度图像--图像增强 直方图均衡化（Histogram equalization）

    灰度图像--图像增强 直方图均衡化(Histogram equalization) 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些 ...

  7. 关于O（n）算法

    首先要明确一点,当数据规模达到百万时需用O(n)算法 如何实现O(n)算法,其实是对原有算法的一种改进 后者说是 原有算法+一点小性质=O(n)算法 下面我将举几个例子来说明这一点: 1.后缀数组中h ...

  8. Notice

    13.793103448276 Notice: Undefined offset: -1 in C:\Zend\Apache2\htdocs\crawlWebsite\Crawl360.php on ...

  9. Android-webView的loadUrl

    1 //打开本包内asset目次下的test.html文件 wView.loadUrl(" file:///android_asset/test.html "); 2 //打开本地 ...

  10. DevExpress gridControl控件动态绑定列 zt

    DataTable dt = =Query.GetCustome=(ref customColumnCount); //绑定列 gridView.Columns.Add(}); gridView.Co ...