首先，让我们回忆一下对于组件的讨论：
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);
}
}
}
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或者noneif(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); } } }
