对于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);
}
分享到:
相关推荐
值得注意的是,如果同时设置了 `applyTo` 和 `renderTo`,`applyTo` 将优先生效,这在ExtJS的文档中也有明确说明。 `applyToMarkup` 方法实际上最终也是调用了 `render` 方法,但它的位置是在父元素(parentNode)...
使用 `applyTo` 时,不需要调用 `render()` 方法,且 `renderTo` 配置会被忽略。 11. **tbar** 和 **bbar**:这两个配置用于定义 FieldSet 顶部和底部的工具栏。可以是 `Ext.Toolbar` 实例、工具栏配置对象或按钮...
如果希望对象在创建后立即渲染到页面上,可以在配置项中设置`renderTo`属性,指定元素ID: ```javascript var myPanel = new Ext.Panel({ title: '我的面板', width: 300, height: 200, html: '这是面板的内容'...
11. **applyTo**: 使用已存在的DOM元素来创建FieldSet,组件会根据这些标记来构建子组件,无需手动调用`render()`方法。 12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏,可以是Ext.Toolbar实例...
- **配置项**: - `title`: 表单标题。 - `bodyPadding`: 表单内边距。 - `width`: 表单宽度。 - `renderTo`: 渲染目标元素。 - `items`: 表单项目列表。 - `xtype`: 使用 `customspinner` 类型。 - `...
在 `PersonListGridPanel` 示例中,我们创建了一个新的 `GridPanel` 组件,它包含了自定义的配置项,如渲染位置、大小、标题栏按钮以及列设置等。`constructor` 函数接收一个URL参数,但在这个示例中并未使用。通常...
如分辨率、质量等级等Render settings 渲染设置调整渲染质量和效果Graphics emulation 图形仿真模拟不同硬件的图形性能Network emulation 网络仿真测试网络连接和同步Snap settings 对齐设置设置物体在移动、旋转时...
在“Unity3D中文菜单手册”中,MR.C详细解释了每个菜单项和参数,旨在帮助初学者更好地理解和操作Unity3D。 File(文件)菜单是Unity3D的核心部分,提供了项目管理的基本操作: 1. New Scene:新建场景,允许...
如Light、Camera等Center On Children 子物体归位到父物体中心点将所有子物体的位置居中于父物体中心Make Parent 创建子父集将一个或多个游戏...Apply Changes To Prefab 应用变更为预置如果游戏对象是预制体的一部分...
- **Project settings/Render settings/Graphics emulation/Network emulation/Snap settings**:调整项目、渲染、图形仿真、网络仿真和对齐设置。 3. **Assets(资源)**: - **Reimport**:重新导入已修改的...
- **示例**: `var btn = new Ext.Button({ renderTo: 'buttonDiv' })`。 #### 八、按钮与日期选择器 **8.1 按钮** - **特点**: 外观可高度定制。 - **示例**: `new Ext.Button({ text: 'Button', handler: ...
- **Apply Changes To Prefab**(应用到预制体):将对预制体实例所做的更改同步回预制体本身。 - **Move To View**(移动到视图):将游戏对象移动到视图中心。 - **Align With View**(与视图对齐):将游戏对象与...