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>

时间: 2024-10-11 17:21:19

ExtJS笔记--applyTo和renderTo的差别的相关文章

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明                       

extjs笔记(一) ext.onready()用法

定义:加载完ExtJs库之后,开始加载OnReady中指定的函数 参数:onReady( fn, scope, options ) fn回调函数 表示要执行的函数 scope表示函数的作用域 表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可. 事例探究一:加载方法的作用 a. function a(){ alert("every thing is OK!") } Ext.onReady(a); b. Ext.onReady(function(){ a

ExtJS笔记 Tree

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - feat

ExtJS笔记 Using Events

Using Events The Components and Classes of Ext JS fire a broad range of events at various points in their lifecycle. Events allow your code to react to changes around your application. They are a key concept within Ext JS. 在ExtJS组件和类的生命周期中,会触发许多类型的事件

ExtJS笔记5 Components

参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of one or many widgets called Components. All Components are subclasses of theExt.Component class which allows them to participate in automated lifecycl

ExtJS笔记 Form

A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can be used throughout an Ext application wherever there is a need to collect data from the user. In addition, Form Panels can use any Container Layout, p

ExtJS笔记 Grids

参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile component that provides an easy way to display, sort, group, and edit data. Grid 面板为 Ext JS 的大头核心之一.它是一个通用性很强

ExtJS笔记4 容器与布局(Layouts and Containers)

The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning of every Component in your application. This guide covers the basics of how to get started with layouts. 布局系统是 Ext JS 的最强大的部分之一.它可以处理您的应用程序中的每个组件的大小和

ExtJS笔记整理

ExtJs使用总结(非常详细)-extjs 一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存. 注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单