对于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);
}
分享到:
相关推荐
ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码, 代码如下: <head> <title>RenderTo and ApplyTo</...
How Does Game Theory Apply to Radio Resource Management? James Neel
How do I apply to become a PAAPAI CA.msg
How to apply for PMP certification? It is easy to make it following the several step and points in the file.
SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能
JavaScript中call与apply方法
安装好原程序,了世哪个汉化文件《Renderin》放到C:\Program Files\Google\Google SketchUp 8\Plugins\Renderin目录下替换原文件,打开SU8在插件下Renderin菜单点License,在弹出的窗口输入号码,点Apply等一会在...
用数据驱动招聘替代传统招聘
Matlab Tutorial - 42 - Apply Mathematical Functions to Matrices
ES5的apply手写实现
js中call,apply,setCapture,releaseCapture的使用.pdf
(源碼)C#,連接redis 集群,和本地連接 C# 打印控制台程序,包括依賴,測試文件,配置好的集群文件
淡淡简单描述javascript中方法apply和call
资料来源:https://github.com/adityaanand1/angel-apply posppppppppppppppppppppppppppply快速有效地在angellist(https://angel.co/)上! 来源:https://github.com/adityaanand1/angel-apply
They apply to the software named above, which includes the media on which you received it, if any. The terms also apply to any Microsoft • updates, • supplements, • Internet-based services, and ...
语言:English (United States) 帮助您通过Cutback.io申请职位 该扩展名与https://cutback.io一起使用,可让您自动填写您的求职申请。
JS数组追加数组没有现成的函数,这么多年我已经习惯了a.push.apply(a, b);这种自以为很酷的,不需要写for循环的写法,一直也没遇到什么问题,直到今天我要append的b是个很大的数组时才遇到了坑。
NULL 博文链接:https://angrycoder.iteye.com/blog/1152908