`
haohao00789
  • 浏览: 2107 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

阅读更多
这几天遇到个问题 , 使用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
分享到:
评论

相关推荐

    易语言选择当天时间组件 - 组合框拼接源码

    在这个特定的案例中,我们关注的是“易语言选择当天时间组件 - 组合框拼接源码”。这个标题表明我们将探讨如何在易语言中利用组件来获取当前日期,并将其与组合框(ComboBox)中的数据进行拼接操作。 组合框,也...

    易语言选择框组件使用方法

    在易语言中,选择框组件是常见的控件之一,常用于创建具有是/否、开/关选项的用户界面。选择框组件允许用户进行单选,即在一组选项中选择一个。 在易语言中使用选择框组件,首先需要打开易语言环境并新建一个...

    ok流式选择框类库.rar

    "Ok流式选择框类库"是一个专门为开发者设计的组件库,主要功能是提供一种高效、易用的流式选择框控件。在编程中,特别是在UI界面开发时,选择框是一个常用且至关重要的元素,它允许用户在多个选项中进行单选或多选...

    ext3.0-月份,年份选择框

    在IT行业中,前端开发是构建用户界面的关键部分,而组件库则是前端开发的重要工具。"ext3.0-月份,年份选择框"是一个专为EXTJS 3.0框架设计的特定组件,用于帮助用户在界面上方便地选择月份和年份。EXTJS是一个强大的...

    C# 自定义组件 下拉框选择颜色

    本主题聚焦于创建一个自定义组件——"下拉框选择颜色"(CtlColorComboBox)。这个组件允许用户在一个下拉列表中选择颜色,以便于在应用程序中进行颜色配置,比如在mschart中为线形图分配不同颜色。 首先,`...

    ExtJs4实现下拉树选择框ComboTree

    ### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中,ExtJS 是一个非常强大的JavaScript库,用于构建复杂的客户端应用程序。它提供了丰富的组件库,使得开发者能够轻松地创建出功能丰富且交互性...

    易语言组件边框美化

    易语言组件边框美化源码,组件边框美化,开启边框美化,Border_SubClass,Border_OnMessage,Border_DrawBorder,CallWindowProc,CreatePen,FrameRect,GetProp,GetWindowDC,GetWindowRect,SetProp,SetWindowLong,...

    activiti将用户输入框修改为弹出选择框

    6. **测试与优化**:最后,别忘了进行充分的测试,确保在不同场景下,选择框都能正常工作,没有性能问题,并且对用户体验友好。 通过以上步骤,你可以成功地在Activiti中将用户输入框转换为弹出选择框,提高流程的...

    WPF 字体选择框 可选择中文字体 包含源码

    修改的论坛上另一个字体选择框,那个选择框N多BUG,而且还不能选择中文字体。修改后,可选择中文字体(全世界第三方文字选择框中唯一),可设置字体颜色,界面也变成中文。 本来想不要分的,但想想也努力的一点时间...

    jquery 复选框组件

    **jQuery 复选框组件详解** 在Web开发中,复选框(Checkbox)是一种常见的用户交互元素,用于让用户从多个选项中选择一个或多个。jQuery,作为一款强大的JavaScript库,提供了丰富的插件和方法来增强复选框的功能和...

    element.js多选择框上下级联动插件.zip

    当用户在一个选择框中选择一个项时,相关的下级选择框会自动更新其选项,显示与所选上级项相关联的子项。这样既提高了用户体验,也简化了数据的输入和管理。 Element.js插件实现这个功能,主要利用了Vue.js的响应式...

    易语言超级列表框添加组件

    易语言超级列表框添加组件源码,超级列表框添加组件,处理,重画控件,被单击,创建进度条,设置进度条,画出进度条,绘制进度条,CallWindowProcA,SetWindowLongA,GetScrollRange,GetScrollPos,删除目标,放弃环境,取环境,取...

    LABVIEW 表格中可输入颜色框_下拉框_选择框

    "LABVIEW 表格中可输入颜色框_下拉框_选择框"这个标题指出,我们将在LabVIEW中探讨如何通过自定义控件实现一个特殊的表格功能,允许用户在表格单元格中输入颜色、下拉框或选择框,而不仅仅是标准的文本。这样的功能...

    自定义WPF TreeSelect、MultiTreeSelect ,树形选择框,多选树形选择框

    在WPF中实现这一特性,我们需要确保每个节点都有一个复选框,用户可以通过勾选复选框来选择或取消选择节点。这可能涉及到自定义TreeViewItem模板,以及处理选中状态的逻辑。 以下是一些关键步骤和知识点: 1. **...

    易语言组件例程-单选框使用

    此外,易语言学习论坛是一个宝贵的资源库,你可以在这里找到更多关于易语言组件使用的示例和讨论,与其他学习者交流心得,解决遇到的问题。参与论坛活动,可以提升自己的编程技能,同时也能了解到易语言的最新发展和...

    6个Web前端纯CSS3实现的单多选选择框(六)

    通过创建自定义的样式和动态效果,开发者可以将原本平淡无奇的选择框转变为符合品牌形象且易于使用的组件。同时,结合JavaScript库如jQuery,还能进一步增加用户与选择框的互动性,例如通过添加拖放、滑动选择等高级...

    带选择框的下拉列表源码

    "带选择框的下拉列表"是一种高效且实用的设计模式,它结合了传统的下拉列表和复选框的功能,使得用户可以在有限的空间内进行多项选择。在本项目中,开发者为了解决界面空间有限但需要多选功能的问题,创新地实现了...

    Android组件实现列表选择框功能

    下拉列表的列表选择项能够通过xml文件的android:entries属性指定,或是在java代码中导入,属性android:prompt是列表项的标题。 一 列表项数据:  实际运用当中,很多下拉列表项的数据实际是可知的,可以放在xml...

    多项选择的列表框,左右选择,带排序功能

    "多项选择的列表框,左右选择,带排序功能"是一个典型的组件,它提供了高效且直观的方式来处理大量选项,让用户能够轻松地筛选、选择和组织数据。这个代码实现了一个这样的功能,允许用户在两个独立的列表之间进行...

    易语言动态创建编辑框组件.rar

    易语言动态创建编辑框组件.rar 易语言动态创建编辑框组件.rar 易语言动态创建编辑框组件.rar 易语言动态创建编辑框组件.rar 易语言动态创建编辑框组件.rar 易语言动态创建编辑框组件.rar

Global site tag (gtag.js) - Google Analytics