皮皮网

【atv音频源码输出】【aop 源码解析】【UI客栈源码】extjs项目源码_exui源码

时间：2024-12-26 14:02:55 分类：综合 来源：快速矩阵源码

1.renderTo和applyTo的区别
2.Extjs 之 initComponent 和 constructor的区别
3.extjs 值得学习吗

extjs项目源码_exui源码

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',目源码e码atv音频源码输出 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版本是行）：复制代码 代码如下: 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版本是行)， 复制代码 代码如下: applyToMarkup : function(el){ this.allowDomMove = false; this.el = Ext.get(el); this.render(this.el.dom.parentNode); } 它最终调用的也是render，不过render的位置是parentNode,render方法如下(3.1.0版本是行) 复制代码 代码如下: 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的位置不同。

Extjs 之 initComponent 和 constructor的区别

       Extjs 提供的组件还是挺丰富的， 但是有时候需求更丰富。

       å½“Extjs 原生的组件无法实现我们的要求的时候， 就需要扩展Extjs 的组件实现自制组件了。

       é™¤äº†è¿™ç§ä½¿ç”¨çŠ¶å†µï¼Œ 有时候对于一些相同却有使用很多的配置， 可能像把它独立出来，单独设为一种组件供大家调用， 节省开发时间和提高代码重用度。

       initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

       1. initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的，只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法

       çœ‹ä¸€ä¸‹ Ext.AbstractComponent的源码文件 src/AbstractComponent.js

       åœ¨ constructor方法中调用了initComponent

       2.

        1）自定义类中的 initComponent　函数中必须调用 callParent();否则 调用者无法初始化这个对象

        2）针对button 这样的扩展组件来说，自定义类中的 constructor ，需要调用callParent( arguments);否则 调用者无法初始化这个对象

       [html] view plaincopyprint?

       this.callParent(arguments);

       this.callParent(arguments);

       è¿™é‡Œçš„arguments 是需要的。

       (在Extjs 4 之前的版本中， 可能会看到比较多的XXX.superclass.constructor.call 写法)

       sencha 的官网中有一篇针对这两个区别的讨论：

       /forum/showthread.php?-constructor-Vs-initComponent

       ä¸è¿‡è¯­æ³•æ˜¯åŸºäºŽExtjs 3 来讨论的， 笔者觉得作用不是很大。

extjs 值得学习吗

       å¦‚果需要的话，值得学习

       ä¸ç”¨å†è°ƒcss，降低了工作量；

       æ–‡æ¡£å’Œä¾‹å­é½å…¨ï¼Œæ˜¯å¼€æºçš„，方便查看源码；

       ç»„件丰富，可以自行封装组件；

       æ´»è·ƒçš„Extjs开发交流q群：

一周热点

编辑推荐

copyright © 2016 powered by 皮皮网   sitemap