`
bbiao
  • 浏览: 72146 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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);   
}
分享到:
评论
2 楼 bbiao 2007-12-21  
bigxxs 写道
呵呵,响应真快,是否可以简单理解为:

applyTo是直接使用指定元素来生成组件,
renderTo是在指定容器内部生成组件(该元素被用作容器)
applyToMarkup和render则是分别对应于以上两个属性的lazyRender方法

是否是lazyRender要视具体的组件来看,不过你前两点的认识是对的
1 楼 bigxxs 2007-12-21  
呵呵,响应真快,是否可以简单理解为:

applyTo是直接使用指定元素来生成组件,
renderTo是在指定容器内部生成组件(该元素被用作容器)
applyToMarkup和render则是分别对应于以上两个属性的lazyRender方法

相关推荐

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    值得注意的是,如果同时设置了 `applyTo` 和 `renderTo`,`applyTo` 将优先生效,这在ExtJS的文档中也有明确说明。 `applyToMarkup` 方法实际上最终也是调用了 `render` 方法,但它的位置是在父元素(parentNode)...

    Ext.form.FieldSet的用法.pdf

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

    extjs3.4如何创建对象

    如果希望对象在创建后立即渲染到页面上,可以在配置项中设置`renderTo`属性,指定元素ID: ```javascript var myPanel = new Ext.Panel({ title: '我的面板', width: 300, height: 200, html: '这是面板的内容'...

    Ext.form.FieldSet的用法.docx

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

    extjs的spinner

    - **配置项**: - `title`: 表单标题。 - `bodyPadding`: 表单内边距。 - `width`: 表单宽度。 - `renderTo`: 渲染目标元素。 - `items`: 表单项目列表。 - `xtype`: 使用 `customspinner` 类型。 - `...

    Ext 实现自定义控件

    在 `PersonListGridPanel` 示例中,我们创建了一个新的 `GridPanel` 组件,它包含了自定义的配置项,如渲染位置、大小、标题栏按钮以及列设置等。`constructor` 函数接收一个URL参数,但在这个示例中并未使用。通常...

    Unity3D菜单汉化翻译.docx

    如分辨率、质量等级等Render settings 渲染设置调整渲染质量和效果Graphics emulation 图形仿真模拟不同硬件的图形性能Network emulation 网络仿真测试网络连接和同步Snap settings 对齐设置设置物体在移动、旋转时...

    Unity3D中文菜单手册.docx

    在“Unity3D中文菜单手册”中,MR.C详细解释了每个菜单项和参数,旨在帮助初学者更好地理解和操作Unity3D。 File(文件)菜单是Unity3D的核心部分,提供了项目管理的基本操作: 1. New Scene:新建场景,允许...

    UnityD中文菜单手册.docx

    如Light、Camera等Center On Children 子物体归位到父物体中心点将所有子物体的位置居中于父物体中心Make Parent 创建子父集将一个或多个游戏...Apply Changes To Prefab 应用变更为预置如果游戏对象是预制体的一部分...

    unity3d菜单汉化翻译 (1).docx

    - **Project settings/Render settings/Graphics emulation/Network emulation/Snap settings**:调整项目、渲染、图形仿真、网络仿真和对齐设置。 3. **Assets(资源)**: - **Reimport**:重新导入已修改的...

    Extjs中文教程2.x

    - **示例**: `var btn = new Ext.Button({ renderTo: 'buttonDiv' })`。 #### 八、按钮与日期选择器 **8.1 按钮** - **特点**: 外观可高度定制。 - **示例**: `new Ext.Button({ text: 'Button', handler: ...

    Unity菜单翻译

    - **Apply Changes To Prefab**(应用到预制体):将对预制体实例所做的更改同步回预制体本身。 - **Move To View**(移动到视图):将游戏对象移动到视图中心。 - **Align With View**(与视图对齐):将游戏对象与...

Global site tag (gtag.js) - Google Analytics