这几天遇到个问题 , 使用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是不换行的)。
问题终于解决啦 , 上效果图
- 大小: 8 KB
- 大小: 9.7 KB
- 大小: 10.2 KB
分享到:
相关推荐
extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...
在JSP(Java Server Pages)页面中,日期选择框是一个常用的用户界面元素,它允许用户以图形化的方式选择日期。这种交互方式对于处理与日期相关的数据输入非常方便,例如在预订系统、日程安排或者记录生日等场景。在...
在网页设计中,选择框(Select)是一种常见的交互元素,用于让用户从预设的选项中进行选择。然而,原生的HTML `<select>` 元素样式单一,难以满足现代网页的美观需求。针对这一问题,开发者们通常会采用自定义 ...
"cad统计多线段总长度插件lsp"就是为了解决这个问题而开发的一种工具。 LSP,全称“Lisp Service Provider”,是AutoCAD(一款流行的CAD软件)中的编程语言,基于古老的LISP(LISt Processing)语言。LISP在CAD环境...
下拉选择框是力软前端组件 API 中的一个常用的选择组件,提供了多种选择方式,包括单选、多选、级联选择等。该组件提供了多种参数设置,包括选择框的宽度、高度、背景颜色、文字颜色等,可以满足不同的业务需求。 ...
多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker stepper input ,引用组件或者复制粘贴使用,提高工作效率。
Bootstrap Table+日期选择框实例,可配合Ajax直接用于实际项目开发,亲测可用
产品经理Axure必备——自制中继器下拉选择框组件
当用户在一个选择框中选择一个项时,相关的下级选择框会自动更新其选项,显示与所选上级项相关联的子项。这样既提高了用户体验,也简化了数据的输入和管理。 Element.js插件实现这个功能,主要利用了Vue.js的响应式...
在WPF中实现这一特性,我们需要确保每个节点都有一个复选框,用户可以通过勾选复选框来选择或取消选择节点。这可能涉及到自定义TreeViewItem模板,以及处理选中状态的逻辑。 以下是一些关键步骤和知识点: 1. **...
本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它方法。
wxDateSelector是用于微信小程序的一个日期选择器插件。鉴于目前微信小程序自带的日期选择器只能支持 年月日 或者 时分 的选择。并且不能设定时间的起止筛选而开发的微信小程序自定义组件,方便项目中快捷使用。
包含多种常用组件,设计展示方式非常适合初学者使用。 常用组件 Basic 色彩 Color Schema 站点导航 Site Nav 顶部导航模板1 顶部导航模板2 侧栏导航模板1 侧栏导航模板2 常用元素 Text & Image 文字...
在Java编程环境中,有时我们需要与用户交互,获取他们的文件或文件夹选择,这时就用到了“Java文件夹选择框”(Java Directory Chooser)和“Java文件选择器”(Java File Chooser)。这两个组件是Java Swing库的一...
然而,在实际操作中,可能会遇到下拉选择框不显示的问题。本文将介绍一种解决Layui动态生成的`select`下拉选择框不显示的方法。 首先,我们需要了解Layui的`form`模块是如何工作的。Layui的`form`模块提供了丰富的...
易语言超级列表框表项全部选择或者全部取消 源码
综上所述,JointJS是一个强大且灵活的图形库,适用于创建各种图表和流程图,而“组件框”和“流程组合”的概念则展示了其在构建交互式流程设计工具中的应用。结合提供的文件名,我们可以推测这可能是一个简单的示例...
本项目聚焦于EasyUI中的单选框和多选框组件,这两个组件在数据选择和用户交互方面扮演着重要角色。 标题中的“基于easyui的单选和多选框组件”指的是使用EasyUI库来实现的特定用户界面元素。EasyUI提供了丰富的组件...