`
zenghuiss
  • 浏览: 26022 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Extjs combobox 多个选项的displayField相同时返回值不正确

 
阅读更多
最近碰到个combobox的问题,当combobox里面有多个相同的displayField,无论你选哪一个,只要组件失去焦点后,调用getValue()时总是返回第一个valueField,

通过debug源码,发现combobox的beforeBlur事件中调用了assertValue的方法,而问题就是出在这里,原因写在注释中:
 assertValue  : function(){
        var val = this.getRawValue(),
            rec = this.findRecord(this.displayField, val);

        if(!rec && this.forceSelection){
            if(val.length > 0 && val != this.emptyText){
                this.el.dom.value = Ext.value(this.lastSelectionText, '');
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            if(rec){

/*
因为前面this.findRecord(this.displayField, val)找到的是第一条符合条件的record(即第一条record),如果我们选择的选项不是第一条的话,下面的this.value == rec.get(this.valueField)就无法成立,代码将会用第一条record的value覆盖掉我们原来选择的value,所以导致只要失去焦点后再去getValue,就一直返回第一条记录的value的问题*/
                if (val == rec.get(this.displayField) && 
                       this.value == rec.get(this.valueField)){
                    return;
                }
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    }


解决方法也很简答,覆盖掉此方法即可
代码如下:
Ext.override(Ext.form.ComboBox, {
    assertValue: function () {
        var val = this.getRawValue(),
            rec = this.findRecord(this.displayField, val);

        if (!rec && this.forceSelection) {
            if (val.length > 0 && val != this.emptyText) {
                this.el.dom.value = Ext.value(this.lastSelectionText, '');
                this.applyEmptyText();
            } else {
                this.clearValue();
            }
        } else {
            if (rec) {
                //移除this.value == rec.get(this.valueField)
                if (val == rec.get(this.displayField)) {
                    return;
                }
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    }
});


后来查看官方文档,发现此问题在3.4以后就修复了,唉,用太老的版本开发就是会有一些很莫名其妙的问题。。。
分享到:
评论

相关推荐

    extjs 自动补全 模拟combobox

    Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们理解EXTJS的Combobox组件。Combobox由两部分组成:一个文本输入框和一个下拉列表。文本输入框...

    extjs4 ComboBox 点击下拉框 出现grid效果

    ComboBox的默认行为是弹出一个包含选项的列表,而你想要实现的是当用户点击下拉按钮时,展示一个Grid,这样可以展示更多的信息并且支持更复杂的交互。这种自定义的行为需要对EXTJS4的事件处理和组件嵌套有深入的理解...

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

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    ExtJS Combobox二级联动列子

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

    extJs ComboBox级联

    级联ComboBox意味着两个或多个ComboBox之间存在关联,当用户在一个ComboBox中做出选择时,它会更新另一个ComboBox的选项,展示与当前选择相关的数据。 实现ExtJS ComboBox级联的关键在于理解其数据绑定和事件监听...

    extjs3.x combobox智能联想

    在EXTJS 3.x版本中,Combobox是一个非常实用的组件,它提供了下拉列表功能,用户可以在输入框中输入文字,系统会根据输入内容自动进行模糊匹配,给出相关的建议选项。这种功能在数据筛选、搜索或者选择项较多时特别...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    通过合理设置这些组件和属性,可以构建出具有动态联动效果的下拉菜单,同时确保在数据提交时正确地传递选定的值。这样的功能对于多级关联数据的输入场景非常有用,提高了用户界面的交互性和数据一致性。

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在ExtJS 3.4.0版本中,多选下拉框(Multiselect Combobox)是一种常见的用户界面组件,用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到...

    extjs的ComboBox 2级联动

    ExtJS的ComboBox是一个非常强大的组件,它用于创建下拉选择框。在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份...

    无废话ExtJs 教程十[下拉列表:Combobox]

    本教程将深入探讨ExtJS中的Combobox组件,包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成:文本输入框和下拉列表。用户可以在输入框中键入文字,或者...

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

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

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    extJs4 ComboBox组合框实例

    extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释

    Extjs让combobox写起来简洁又漂亮

    其中,Extjs的combobox组件是一个常用的UI控件,它集成了文本输入和下拉列表,允许用户在有限的空间内快速选择一个选项。 在Extjs中,创建一个简洁又漂亮的combobox组件主要包括以下几个关键点: 1. 创建自定义...

    模仿extjs风格写的jquery combobox

    这个jQuery ComboBox是开发者为了在不使用ExtJS完整库的情况下,实现类似ExtJS ComboBox的交互效果和功能而创建的。 描述中的“NULL”没有提供额外的信息,但我们可以根据标题推测,这个项目可能包含了使用jQuery...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    这个组件通常用于显示从服务器获取的动态选项,它允许用户根据需要选择或取消选择多个选项,同时将这些更改实时同步到服务器。 首先,让我们了解ExtJS的基本概念。ExtJS是一个强大的JavaScript库,主要用于构建富...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    Extjs学习笔记(-):ComboBox联动

    在EXTJS这个强大的JavaScript框架中,ComboBox控件是一种常用的组件,它用于实现下拉选择框的功能。本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果,即一个ComboBox的选择会触发另一个ComboBox的数据更新,以此来...

    #ComboBox自动补全小技巧(模糊查找)

    在.NET框架下,ComboBox控件是Windows Forms应用程序中常见的组件,用于展示下拉列表供用户选择。本教程将深入探讨如何在C#环境下,利用VS2005为ComboBox添加自动补全或模糊查找功能,这在实际开发中非常实用,能够...

Global site tag (gtag.js) - Google Analytics