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

你可能感兴趣的:(component)