关于extJsComboBox组件选择框太窄而选择项长度太长的问题

这几天遇到个问题 , 使用extJs的ComboBox的组件的时候 ,由于选择项比较长 , 而可供放置组件的地方又不便过大 , 就导致了下拉框显示文字不全的问题。
[img]http://dl2.iteye.com/upload/attachment/0098/0387/2d5769a4-dc48-38c1-82f6-e5ec3680ea43.png[/img]

对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了
[img]http://dl2.iteye.com/upload/attachment/0098/0391/289f4a0a-b00f-387f-909f-070af59569fe.png[/img]
这种方法对于字符串长度不是很长的选项来说已经够用了 , 但是如果下拉选项的字符串太长的话 , 这种方法就不适用了(ps : 感觉太长的选项设计的就不是很合理)

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

[img]http://dl2.iteye.com/upload/attachment/0098/0405/899755c4-6c1c-35a9-826b-7b059b85c8d5.png[/img]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值