`
zhcl321
  • 浏览: 25987 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Ext comboBox选项内容超长时的处理方式

阅读更多
实现:
1.添加选项时,对于超长的内容做一次截取操作
2.截取之后,给comboBox增加tip提示
var userGroupComBox = new Ext.form.ComboBox({
id : "userGroupComBox",
name : 'userGroupComBox',
triggerAction : 'all',
displayField : 'value',  //comboBox显示值
valueField : 'value',
mode : 'remote',//这里使用了远程模式,用来从数据库获取数据并显示
// mode : 'local',
width : 180,
loadingText : "please waitting", //加载等待提示语
editable : true,
typeAhead : false,
minChars : 1,
store : (proVersion == is9X) ? childStore : [["", ""]],
listeners : {
// 验证用户输入的用户群是否正确
blur : function(combo, record, index) {
                },
        select:function (combo, record, index){
    if (combo.value == "...") {
         userGroupComBox.setValue("");
    }
}
}

选择项超长时截取并给予tip提示
//截取JSON Store中的数据,并给予tip提示
function splitUserGroupValue(store){
var splitStore=new Ext.data.Store({});
for ( var i = 0; i < store.length; i++) {
var dataName=store[i].data.value+"";
var dataValue=getEllipsis(store[i].data.value,32)+"";
splitStore.add(new Ext.data.Record({
name : dataValue,
value : dataName
}));
}
return splitStore;
}


tip提示对象
var tpl = new Ext.XTemplate( 
'<tpl for="."><div class="x-combo-list-item"><span style="backgroud-color:#646464;" ext:qwidth="auto" ext:qtip="{value}"> {name} </span></div></tpl>' 
); 
userGroupComBox.tpl=tpl;

分享到:
评论

相关推荐

    Ext combobox 下拉多选框带搜索功能

    5. **事件处理**:添加适当的事件监听器,例如`select`事件,以便在用户选择或取消选择选项时执行相应的操作。 6. **优化性能**:对于大型数据集,可能需要使用分页或懒加载来提高性能,避免一次性加载所有数据。 ...

    Ext4.0 动态修改ComboBox选择项(本地模式)

    在IT行业中,尤其是在Web开发领域,经常需要与用户界面交互,ComboBox(下拉框)是一种常用的组件,用于提供用户选择的选项。本知识点主要聚焦于如何在Ext4.0框架下动态修改ComboBox的选择项,特别是在本地模式下...

    Ext ComboboxGrid

    "Ext ComboboxGrid"是一个基于Ext JS框架的组件,它结合了下拉框(ComboBox)和数据网格(Grid)的功能,提供了一种更强大的选择和筛选数据的方式。在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则...

    Ext comboBox的remote模式,联想功能实现

    在Ext JS的comboBox中,远程模式(remote mode)是一种数据加载策略,它适用于处理大量数据或实时数据的情况。在这种模式下,comboBox不会一次性加载所有选项,而是根据用户输入的关键词动态地向服务器发送请求,...

    Ext ComBobox 附带完整附件

    2. **数据绑定**:Ext JS支持数据绑定,这意味着ComBobox的选项可以直接与后台数据源关联,当数据源发生变化时,组合框会自动更新,反之亦然。 3. **模板和渲染**:DmaComboBox.js可能包含了自定义的模板和渲染逻辑...

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    combobox Ext之扩展组件多选下拉框

    - `store`:用于存储下拉选项的数据源,可以是数组或Ext.data.Store对象。 2. **多选事件处理**: - `select`事件:在多选模式下,当用户添加或移除选项时,这个事件会被触发。我们需要监听此事件来处理值的改变...

    Ext带图标Combobox

    实现这个功能通常需要自定义Combobox的模板,添加图标占位符,并在数据加载时为每个选项指定相应的图标。 **3. 自定义模板** Ext JS的模板系统是通过XTemplate实现的,它支持动态渲染HTML。在创建IconCombobox时,...

    EXT2_combobox_form.rar_combobox ext_ext

    EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...

    extjs的ComboBox 2级联动

    在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份和城市的关联选择。本文将深入探讨如何在ExtJS中实现ComboBox的...

    ExtJS Combobox二级联动列子

    2. 二级联动:指两个或多个Combobox之间存在依赖关系,当一个Combobox的值改变时,另一个Combobox的选项也会相应更新。 二、实现原理 1. 数据模型:通常使用Store来存储数据,Store中每个记录包含多个字段,对应...

    Ext2.0本地模式动态修改combobox选择项

    标题中的“Ext2.0本地模式动态修改combobox选择项”指的是使用Ext JS 2.0框架中的Combobox组件在本地数据模式下实现动态更新选择项的功能。Ext JS是一个流行的JavaScript库,主要用于构建富客户端Web应用程序。...

    Ext 异步加载添加 删除节点 修改combobox选择项

    在Ext JS中,异步加载是一种常见的数据处理方式,尤其在构建动态的用户界面时非常有用。本篇文章主要探讨了如何在异步加载的场景下,实现树形控件(TreePanel)中节点的动态添加、删除以及ComboBox选择项的修改。 ...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    这部分内容不直接涉及ComboBox的实现,但确保后端数据源正确设置对于AutoComplete功能的正常运行至关重要。 综上所述,结合Ext JS的`ComboBox`、Java后端以及JSON数据格式,我们可以创建一个高效的自动补全功能,为...

    用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国

    在本案例中,“用Ext 2_0 combobox 做的省份和城市联动选择框”是一种交互式UI设计,常用于地理信息的选择,例如用户先选择省份,然后根据所选省份动态加载对应的城市选项。 Ext 2.0的Combobox组件主要包含以下几个...

    extjs表单中的下拉框(comobobox)手动添加空选项

    ### ExtJS表单中的下拉框(ComboBox)手动添加空选项 在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它...

Global site tag (gtag.js) - Google Analytics