Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

ExtJS中的renderTo和applyTo的差别

对applyTo和renderTo的理解和思考

个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码,


代码如下:

<head>
<title>RenderTo and ApplyTo</title>
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var button = new Ext.Button({
renderTo: 'button',
text:'OK'
});

});
</script>
</head>
<body>
<div id="button">sadfa</div>
</body>
</html>

此代码生成的html如下:
 
如果是applyTo:button,则生成的代码为:

很明显,简单的说,applyTo是将组件加在了指定元素之后,而renderTo则是加在指定元素之内

接下来,我们再稍稍探寻下extjs源码的奥秘。看看extjs内部是如何使用这两个配置项的,利用firebug插件调试一下ext-all-debug.js这个文件。

在Ext.Component的构造函数Ext.Component = function(config){…}中有这样一段代码(3.1.0版本是9270行):


代码如下:

if(this.applyTo){
this.applyToMarkup(this.applyTo);
delete this.applyTo;
}else if(this.renderTo){
this.render(this.renderTo);
delete this.renderTo;
}

可见applyTo属性使得Component调用applyToMarkup方法,而renderTo使得它调用render方法,并且如果两个都设置的话仅有applyTo有效,这点在extjs的文档中也有特别指出。

appylToMarkup方法如下(3.1.0版本是9560行),


代码如下:

applyToMarkup : function(el){
this.allowDomMove = false;
this.el = Ext.get(el);
this.render(this.el.dom.parentNode);
}

它最终调用的也是render,不过render的位置是parentNode,render方法如下(3.1.0版本是9370行)


代码如下:

render : function(container, position){
if(!this.rendered && this.fireEvent('beforerender', this) !== false){
if(!container && this.el){
this.el = Ext.get(this.el);
container = this.el.dom.parentNode;
this.allowDomMove = false;
}
this.container = Ext.get(container);
if(this.ctCls){
this.container.addClass(this.ctCls);
}
this.rendered = true;
if(position !== undefined){
if(Ext.isNumber(position)){
position = this.container.dom.childNodes[position];
}else{
position = Ext.getDom(position);
}
}
this.onRender(this.container, position || null);
if(this.autoShow){
this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
}
if(this.cls){
this.el.addClass(this.cls);
delete this.cls;
}
if(this.style){
this.el.applyStyles(this.style);
delete this.style;
}
if(this.overCls){
this.el.addClassOnOver(this.overCls);
}
this.fireEvent('render', this);

var contentTarget = this.getContentTarget();
if (this.html){
contentTarget.update(Ext.DomHelper.markup(this.html));
delete this.html;
}
if (this.contentEl){
var ce = Ext.getDom(this.contentEl);
Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
contentTarget.appendChild(ce);
}
if (this.tpl) {
if (!this.tpl.compile) {
this.tpl = new Ext.XTemplate(this.tpl);
}
if (this.data) {
this.tpl[this.tplWriteMode](contentTarget, this.data);
delete this.data;
}
}
this.afterRender(this.container);
if(this.hidden){
this.doHide();
}
if(this.disabled){
this.disable(true);
}
if(this.stateful !== false){
this.initStateEvents();
}
this.fireEvent('afterrender', this);
}
return this;
}

render方法看起来比较复杂,仔细阅读下其实也不是太难,主要就是为一个DOM节点设置class,可见性,在onRender方法中会对这个组件生成相应的html代码。
对applyTo和renderTo的理解和思考 中提到的el配置属性,我查extjs的文档发现这是一个只读属性,虽然有方法覆盖它,不过一般不需要手动设置,下面是Panel的公共属性el的文档原文:

el : Ext.Element

The Ext.Element which encapsulates this Component. Read-only.

This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.

Note: this element will not be available until this Component has been rendered.

所以我估计此文写的是以前版本的extjs。个人认为,el是紧包裹着extjs组件的一个DOM节点,一般是由extjs自己生成的,好像细胞膜一样,如果拨开了它,那么这个组件就不完整了,很可能会表现的不正常。而render方法中的container(也就是applyTo中指定元素的父元素,renderTo中指定的元素),是该组件的父元素,这个container中可以包括其他的html元素或者extjs组件。

综上所述,其实applyTo和renderTo没有很本质区别,只是render的位置不同。

时间: 2010-01-05

关于JS数组追加数组采用push.apply的问题

复制代码 代码如下: a = new Array();b = new Array(125624);                     a.push.apply(a, b); 以上的代码在mac的chrome下抛出了如下的异常 复制代码 代码如下: Uncaught RangeError: Maximum call stack size exceeded 如果把数组改为b = new Array(125623);小一个元素居然就好了,测试了一下其他浏览器也都有大数组才出错的问题,但不同浏览器

JavaScript学习点滴 call、apply的区别

1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global

js中call与apply的用法小结

前天去面试,有个gg问了一些js知识,其中有一道call与apply用法的题目,尽管在365天前用过call方法,但当时还是没能答上来,今天深入总结一下 call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,- ] );       // 参数列表,arg1,arg2,...apply(thisArg [,argArray] );                 // 参数数组,argArray 上面两个

js apply/call/caller/callee/bind使用方法与区别分析

一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对

js中继承的几种用法总结(apply,call,prototype)

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>  <body>  <script type="text/javascript">      function Person(na

angularJS中$apply()方法详解

对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

JavaScript中的apply()方法和call()方法使用介绍

1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

js中apply方法的使用详细解析

1.对象的继承,一般的做法是复制:Object.extendprototype.js的实现方式是: 复制代码 代码如下: Object.extend = function(destination, source) {     for (property in source) {         destination[property] = source[property];     }     return destination; } 除此之外,还有种方法,就是:Function.apply

JavaScript中apply方法的应用技巧小结

前言 最近在看JavaScript设计模式,其中有一些巧妙的函数.所以将部分修改后记录在此,顺便加上自己写出的一些好玩的函数.方便大家和自己以后使用.下面来一起看看. 一.apply实现call Function.prototype.call = function () { var ctx = [].shift.apply(arguments) return this.apply(ctx, arguments) } 二.apply实现bind Function.prototype.bind =

JS面向对象、prototype、call()、apply()

一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 复制代码 代码如下: var Class = { create: function() { return function() { this.initialize.apply(this , arguments); } } } // Class使用方法如下 var A = Class

JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

1.Object类 在JS中,Object是所有类的基类,使用Object类来创建自定义对象时,可以无需定义构造函数(constructor,prototype,hasOwnProperty(property)) var per = new Object(); per.name = 'zhangsan'; per.age = ; alert(per.name + per.age); 我们想在程序中得到一个对象变量,只要能存储大量数据即可,这个时候,我们可以考虑使用Object类.Object类避

JS面向对象编程详解

序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些情况下,原型模式能够提供一定的便利,但在复杂的应用中,基于原型的面向对象系统在抽象性与继承性方面差强人意.由于JavaScript是唯一一个被各大浏览器支持的脚本语言,所以各路高手不得不使用各种方法来提高语言的便利性,优化的结果就是其编写的代码越来越像类语言中的面向对象方式,从而也掩盖了JavaSc

彻底理解js面向对象之继承

说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且靠的是原型链实现的.下面正式的说一说js中继承那点事儿 1.原型链 原型链:实现继承的主要方法,利用原型让一个引用类型继承另一个引用类型的属性和方法. 回顾:构造函数,原型,实例三者的关系 每一个构造函数都有一个原型对象(Person.prototype):原型对象都包含指向构造函数的指针(constru

JS中call和apply函数用法实例分析

本文实例讲述了JS中call和apply函数用法.分享给大家供大家参考,具体如下: call 函数 语法 obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]); 简介 thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去. 示例 function animal(type,nickname){ this.type = type; this.nickname = nickname; this.s

JS面向对象编程基础篇(三) 继承操作实例详解

本文实例讲述了JS面向对象编程继承操作.分享给大家供大家参考,具体如下: 构造函数的继承 上一篇JS面向对象编程封装操作,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物";     this.action="吃" } 还有一个&

Function.prototype.call.apply结合用法分析示例

昨天在网上看到一个很有意思的js面试题,就跟同事讨论了下,发现刚开始很绕最后豁然开朗,明白过来之后发现还是挺简单的,跟大家分享下! 题目如下:var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步骤如下: 1.将Function.prototype.call当成整体,call方法是由浏览器实现的本地方法,是函数类型的内部方法 var a = (Function.prototype.c

归纳下js面向对象的几种常见写法总结

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci

js面向对象实现canvas制作彩虹球喷枪效果

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码 代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2

JS 面向对象之继承---多种组合继承详解

这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.n

js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模