RenderTo
<head>
<title>RenderTo and ApplyTo</title>
<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
分享到：
相关推荐
同时，我们还需要了解`renderTo`、`applyTo`和`contentEl`这三个属性的区别和用途，它们分别用于指定Panel渲染的目标位置、应用已存在的DOM节点和设置内容元素。 总结来说，Panel是Ext JS的核心组件，它的灵活性和...
如果希望对象在创建后立即渲染到页面上，可以在配置项中设置`renderTo`属性，指定元素ID： ```javascript var myPanel = new Ext.Panel({ title: '我的面板', width: 300, height: 200, html: '这是面板的内容'...
- `applyTo`：指定Panel渲染到的HTML元素ID。 - `contentEl`：指定将哪个HTML元素的内容呈现到Panel中。 - `renderTo`：指定Panel渲染到的HTML元素ID。 3. **滚动条示例**： ```javascript Ext.onReady...
使用 `applyTo` 时，不需要调用 `render()` 方法，且 `renderTo` 配置会被忽略。 11. **tbar** 和 **bbar**：这两个配置用于定义 FieldSet 顶部和底部的工具栏。可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮...
4. Launch IP-Clamp.exe and choose 'localhost' as primary network adapter, apply. 4. Create a request file using your personnal informations and a licence code generated by our keygen. 5. Use keygen...
Each recipe tackles a specific problem with a solution you can apply to your own project, and includes a discussion of how and why the recipe works. Most of the recipes use the ggplot2 package, a ...
The authors then explain how to apply JSF, including how to integrate JSF user interfaces with the Business Tier and how to render your own user interface components. By following this approach, you'...
directed learners who are comfortable with HTML/Javascript and who want to learn how to create mobile applications using HTML5 for Android and iOS. Readers will learn how to use CSS3 and HTML5 Canvas to render 2D shapes...
s.applyTo('t'); ``` - **初始化值**：设置 `Spinner` 的初始值为 10。 - **数值策略**：使用 `NumberStrategy` 来限制 `Spinner` 的最小值和最大值分别为 0 和 20。 ##### 3.2 时间策略配置 ```javascript Ext.ux...
By the end of the book you’ll be able to see how to apply these techniques to the software you have now.Insight and inspiration are at your fingertips with exercises, step-by-step tutorials and ...
11. **applyTo**: 使用已存在的DOM元素来创建FieldSet，组件会根据这些标记来构建子组件，无需手动调用`render()`方法。 12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏，可以是Ext.Toolbar实例...
5. **应用变更为预置（Apply Changes To Prefab）**：预置（Prefab）是可重用的游戏对象模板，当对实例进行更改后，选择此选项可以将这些更改同步回预置。 6. **资源服务器（Asset Server）**：用于团队协作，存储...
Reimport All重新导入所有游戏对象的资源，Center On Children使子物体居中于父物体，Make Parent和Clear Parent处理父子关系，Apply Changes To Prefab将修改应用到预制体。Move To View和Align With View方便用户...
CollectionEnums.AUTHED_TO_GRANT : CollectionEnums.AUTHED_TO_APPLY, }); }; render() { const { tabActiveKey, collectionType } = this.state; return ( activeKey={tabActiveKey} onChange={(key) ...
We recommend to use TMS components to create modern user interfaces, toolbars and ribbons. 19.2.2013 - WPTools 6.29.1 - fix in rtf writing code to solve problem with merged cells - fix possible range...