关于extJsComboBox组件选择框太窄而选择项长度太长的问题 博客分类： extjs extJscssComboBoxJavaScript

这几天遇到个问题 , 使用extJs的ComboBox的组件的时候 ,由于选择项比较长 , 而可供放置组件的地方又不便过大 , 就导致了下拉框显示文字不全的问题。


对CSS不熟悉 , 刚开始找到了一种方法 , 就是扩大下拉显示窗口 , 复写ComboxBox组件可以完成这一效果 :

var ZsCombo = Ext.extend(Ext.form.ComboBox,{
	initComponent : function(){
		this.tpl = '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>';
		ZsCombo.superclass.initComponent.apply(this, arguments);
	},
	initList : function(){
		ZsCombo.superclass.initList.call(this);
		if(this.list && this.zsWidth){
			var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
		        this.list.setWidth(lw+this.zsWidth);
		          this.innerList.setWidth(lw+this.zsWidth - this.list.getFrameWidth('lr'));
	        }
	}
});

可以看到 , 主要是在初始化下拉框的时候 , 把显示窗宽度设置大一点就OK了

这种方法对于字符串长度不是很长的选项来说已经够用了 , 但是如果下拉选项的字符串太长的话 , 这种方法就不适用了(ps : 感觉太长的选项设计的就不是很合理)

如果能让选项自动换行 , 那就不愁上面的那个问题了,后来查了一下css文档 , 里面有一个关于换行的样式 white-space , 设置为 white-space : normal 的时候文字会自动换行 , 姑且一试 , 找到下拉显示窗用到的css样式 : .x-combo-list-item , 这个样式在ext-all.css文件里面 , 设置这个样式里的white-space : normal就可以了(原设置为white-space: nowrap是不换行的)。
问题终于解决啦 ， 上效果图