applyTo和renderTo配置项

对于applyTo和renderTo，我们在Ext 2.0的官方文档上可以看到，

引用

applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.

即applyTo代表一个在页面上已经存在的元素或该元素的id，该元素通过markup的方式来表示欲生成的组件的某些结构化信息，Ext在创建一个组件时，会首先考虑使用applyTo元素中的存在的元素，你可以认为applyTo是组件在页面上的模板，与YUI中的markup模式很相似。当你在config中配置了applyTo属性后，renderTo属性将会被忽略。并且生成的组件将会被自动置去applyTo元素的父元素中。

引用

renderTo : Mixed
The id of the node, a DOM node or an existing Element that will be the container to render this component into. Using this config, a call to render() is not required.

renderTo主要用来表示新生成的组件在页面上的container

让我们来看看Component.js中的相应代码：

if(this.applyTo){   
    this.applyToMarkup(this.applyTo);   
    delete this.applyTo;   
}else if(this.renderTo){   
    this.render(this.renderTo);   
    delete this.renderTo;   
}   
  
applyToMarkup : function(el){   
    this.allowDomMove = false;   
    this.el = Ext.get(el);   
    this.render(this.el.dom.parentNode);   
}

 


可见applyTo在Component级别是取得applyTo的parentNode来调用render()，各种继承自Component的组件会在各自的onRender方法中来构建组件，使用CSS选择器来选择相应的元素而不是新生成相应的元素。
例如Panel.js中

if(this.el){ // existing markup   
    this.el.addClass(this.baseCls);   
    this.header = this.el.down('.'+this.headerCls);   
    this.bwrap = this.el.down('.'+this.bwrapCls);   
    var cp = this.bwrap ? this.bwrap : this.el;   
    this.tbar = cp.down('.'+this.tbarCls);   
    this.body = cp.down('.'+this.bodyCls);   
    this.bbar = cp.down('.'+this.bbarCls);   
    this.footer = cp.down('.'+this.footerCls);   
    this.fromMarkup = true;   
}else{   
    this.el = ct.createChild({   
        id: this.id,   
        cls: this.baseCls   
    }, position);   
}