`

ext的applyTo 和 renderTo的区别

    博客分类：
  • ext
extapplyTorenderTo 
阅读更多
    Extjs的组件有两个看起来类似的配置项，applyTo和renderTo，这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢，网上搜了下，有两篇博文也是关于这个的。

    ExtJS中的renderTo和applyTo的差别
http://hi.baidu.com/agzfsshohpcdegr/item/50370f1912dc05e39813d6d8

    对applyTo和renderTo的理解和思考
http://yahaitt.iteye.com/blog/249444

    个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码， 
<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的位置不同。




-------------------------------------------------------------------
转载：
http://www.jb51.net/article/21749.htm













--
  • 大小: 14.1 KB
  • 大小: 14.8 KB
分享到：
| 第一次用ant
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext js 培训资料

    同时，我们还需要了解`renderTo`、`applyTo`和`contentEl`这三个属性的区别和用途，它们分别用于指定Panel渲染的目标位置、应用已存在的DOM节点和设置内容元素。 总结来说，Panel是Ext JS的核心组件，它的灵活性和...

    Ext grid合并单元格

    renderTo: "hello", title: "学生基本信息管理", height: 200, width: 600, cm: colM, store: store, viewConfig: viewConfig }); ``` ### 四、总结 通过上述步骤，我们可以在 Ext JS 中实现 Grid 单元格的...

    Ext 实现自定义控件

    renderTo: Ext.getBody(), width: 350, height: 200, frame: true, layout: "form", tbar: [ { text: "add" }, "-", { text: "update" }, "-", { text: "delete" } ], enableColumnMove: false, ...

    Ext.form.FieldSet的用法.pdf

    使用 `applyTo` 时，不需要调用 `render()` 方法，且 `renderTo` 配置会被忽略。 11. **tbar** 和 **bbar**：这两个配置用于定义 FieldSet 顶部和底部的工具栏。可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    Ext.form.TextArea.superclass.setValue.apply(this,[value]); CKEDITOR.instances[this.id].setData( value ); }, getValue : function(){ CKEDITOR.instances[this.id].updateElement(); return Ext....

    Ext.form.FieldSet的用法.docx

    11. **applyTo**: 使用已存在的DOM元素来创建FieldSet，组件会根据这些标记来构建子组件，无需手动调用`render()`方法。 12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏，可以是Ext.Toolbar实例...

    extjs3.4如何创建对象

    renderTo: Ext.getBody() // 渲染到Body元素中 }); ``` 4. 组件组合（Component Hierarchy）： EXTJS允许将多个组件组合在一起，形成复杂的用户界面。例如，可以将一个GridPanel嵌入到Panel中： ```javascript ...

    ExtJS面板学习笔记(带有运行效果)

    这里需要注意的是`renderTo`参数，它指定Panel渲染到的DOM元素ID。 2. **Panel中的属性详解**： - `autoLoad`：可以设置一个有效的URL字符串，该URL中的HTML内容将被加载并显示在Panel内部。 - `autoScroll`：...

    extjs的spinner

    renderTo: Ext.getBody(), items: [{ xtype: 'customspinner', fieldLabel: 'How Much Beer?', step: 6 }] }); ``` - **实例化 FormPanel**：创建了一个包含自定义 Spinner 的表单面板。 - **配置项**： - `...

    extjs4.0学习笔记

    Panel的`title`、`html`、`cls`、`split`、`layout`、`width`、`height`、`hideCollapseTool`、`region`、`margins`、`renderTo`、`items`、`bodyStyle`、`bodyPadding`等属性可以帮助定制组件的外观和行为。...

    button的js代码

    renderTo : 'docbody', menu: undefined, split: false, layoutConfig: { columns:3 }, constructor: function(desc, buttons){ // apply test configs for(var i = 0, b; b = buttons[i]; i++){ b.menu...

    unigui0.83.5.820

    - 0000791: UniDBGrid, UniStringGrid: Option to disable custom renderer to speed-up render time. 0.83.4.819 +---------------------------------------------------------------------------------------- -...

Magicbox
Global site tag (gtag.js) - Google Analytics