applyTo和renderTo配置项

2024-05-07 23:04:31

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

[quote]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元素的父元素中。[/quote]

[quote]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[/quote]

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

[code]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);
}[/code]

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

[code]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);
}[/code]

applyTo和renderTo配置项相关推荐

对applyTo和renderTo的理解和思考
extjs中经常会用到renderTo或applyTo配置选项.这里,我就比较下两者的区别与用法. 1.renderTo与render方法对应 2.applyTo与applyToMarkup方法对应 ...
Extjs学习笔记之五——一个小细节renderTo和applyTo的区别作者：Katmaier 来源：博客园
件有两个看起来类似的配置项,applyTo和renderTo,这两个配置项都是用来指定将该extjs组件加载到什么位置.那他们到底有什么区别呢,网上搜了下,有两篇博文也是关于这个的, ExtJS中的r ...
ExtJs2.0学习系列--Ext.Panel
ExtJs2.0学习系列--Ext.Panel 2008-06-29 12:59 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的 ...
EXT4.2--Ext Designer 使用
前言: "画EXT"是一个美好的想法,如果有一款可视化工具能够只需进行拖拽而设计EXT,生成代码--那真是一件美丽的事.然而现实是,即使是为Eclipse装上EXT插件,用上ide ...
ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子 ...
[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
前言经常使用contentEL,renderTo, applyTo 来增加HTML元素或是Ext JS 组件,这几个之间有什么关系,为什么Ext JS要提供这几种不同的方式? 官方解释 Conten ...
legend位置 pyecharts_可视化入门 | pyecharts全局配置项详解
更多文章,请见: http://mp.weixin.qq.com/mp/homepage?__biz=MzIxODczMDUwOA==&hid=2&sn=7928727456d4903 ...
2、redis.conf基本配置项说明
Redis的配置项看起来比较复杂,分析之下,其实可以分为几大类(以redis v2.6.14版本的redis.conf为例): 1) 基本配置项 2) 持久化(Pe ...

最新文章

热门文章