extjs中combo组件的100%宽度设置

本文主要探讨如何在ExtJS中解决Combo组件无法设置100%宽度的问题。通过分析组件的渲染流程,特别是`onResize`方法在`Ext.form.ComboBox`和`Ext.form.TriggerField`中的影响,提出了解决方案。尽管表单布局通常支持百分比宽度,但针对复杂布局的自定义表单布局可能遇到挑战。修正这两个方法的处理,可以实现Combo组件在百分比布局中的正确显示。
摘要由CSDN通过智能技术生成

 关于一个表单布局中使用百分比对表单项进行布局处理已经不是什么新鲜事了,因为表单布局继承自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);
		}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值