Ext架構分析(3)--Widget之父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);