Ext架构分析:render方法

本文详细解析了ExtJS框架中Component组件的渲染过程,包括render方法的执行流程及关键步骤,如条件判断、DOM操作、样式设置等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ext架构分析(3)--Widget之父Component:render方法
原文链接
http://blog.ccidnet.com/blog-htm-do-showone-uid-77419-type-blog-itemid-246167.html
首先,让我们回忆一下对于组件的讨论:
1.只有配置了applyTo或renderTo属性才会在构建组件时立刻进行render方法的调用;
2.如果是applyTo属性,则会对component的容器进行渲染;renderTo则是对component进行渲染;

现在,让我们看一下render方法的实现:
render : function(container, position){
//如果还没有被渲染 并且beforerender方法返回值为true,则进行渲染,这样,确保了对于组件仅进行一次渲染; position参数指定了组件被插入容器的位置(即在position指定的元素前插入组件)
if(!this.rendered && this.fireEvent("beforerender", this) !== false){
//没有传入任何参数(即未指定容器container)并且设置了this.el,增配置this.container属性
if(!container && this.el){
this.el = Ext.get(this.el);
container = this.el.dom.parentNode;
this.allowDomMove = false;
}
this.container = Ext.get(container);
//如果配置了ctCls,对container进行ctCls的渲染,ctCls(Container Class)是容器的渲染类名,cls(Class)是元素的渲染类名
if(this.ctCls){
this.container.addClass(this.ctCls);
}
this.rendered = true;
//设置position
if(position !== undefined){
if(typeof position == 'number'){
position = this.container.dom.childNodes[position];
}else{
position = Ext.getDom(position);
}
}
//进行onRender方法调用
this.onRender(this.container, position || null);
//如果设置了autoShow,则移除x-hidden和x-hide-hideMode(根据hideMode该属性可以配置为display,visibility,offsets三种属性),从这个方法可以看出,一搬来说,组件创建后缺省的模式为hidden或者none
if(this.autoShow){
this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
}
//如果设置了cls,则对元素进行渲染
if(this.cls){
this.el.addClass(this.cls);
delete this.cls;
}
//如果设置了style,则对元素Style属性进行设置
if(this.style){
this.el.applyStyles(this.style);
delete this.style;
}
//触发fireEvent和AfterRender事件
this.fireEvent("render", this);
this.afterRender(this.container);
//如果设置了hidden和disabled则进行相应的处理
if(this.hidden){
this.hide();
}
if(this.disabled){
this.disable();
}
this.initStateEvents();
}
return this;
}
onRender实现的方法如下:
onRender : function(ct, position){
//如果配置了autoEl属性,则根据autoEl属性生成el属性, 如果autoEl属性为字符串,则根据字符串生成元素;否则,则在autoEl指定的元素外包裹一层div元素
if(this.autoEl){
if(typeof this.autoEl == 'string'){
this.el = document.createElement(this.autoEl);
}else{
var div = document.createElement('div');
Ext.DomHelper.overwrite(div, this.autoEl);
this.el = div.firstChild;
}
}
//把position元素插入到el元素前
if(this.el){
this.el = Ext.get(this.el);
if(this.allowDomMove !== false){
ct.dom.insertBefore(this.el.dom, position);
}
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值