Component：render方法

首先，让我们回忆一下对于组件的讨论：

  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);

}

}

}