关于一个表单布局中使用百分比对表单项进行布局处理已经不是什么新鲜事了,因为表单布局继承自anchor布局,而这种布局天生就支持百分比参数,所以很容易实现此功能,但是由于我对表单的默认布局总觉得使用起来很不方便,尤其对有些复杂的布局内部会参杂着一些列布局之后又要使用表单布局进行控制,这会使得冗余的dom层次结构非常的深,而且在配置的过程中也很容易出错,因此我重写了一个类似于表格排列的表单布局,支持基本的跨行与跨列,和单元格样式,但是对于表单项的100%宽度配置支持不是很好,因为实际的百分比配置是设置表单项的宽度值为一个百分比值,这在大多数据情况下是没有问题的因为Element在设置宽度或高度值时是支持百分比形式的,但对combo却出现了问题,因此在这里将将解决此问题的过程记录一下,首先将设置组件宽高的基本流程分进行仔细分析:
//combo组件完成渲染后的处理流程
afterRender : function(){
Ext.form.TriggerField.superclass.afterRender.call(this);
this.updateEditState();
},
//Ext.form.Field的afterRender方法
afterRender : function(){
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
this.initValue();
},
//Ext.BoxComponent的afterRender方法
afterRender : function(){
Ext.BoxComponent.superclass.afterRender.call(this);
if(this.resizeEl){
this.resizeEl = Ext.get(this.resizeEl);
}
if(this.positionEl){
this.positionEl = Ext.get(this.positionEl);
}