Results 1 to 3 of 3

Thread: Combobox sets input value to displayField, not to valueField

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    1

    Default Combobox sets input value to displayField, not to valueField

    REQUIRED INFORMATION

    Ext version tested:

    • Ext 4.1.1
    Browser versions tested against:
    • IE8
    • FF11
    • Chrome21.0
    Description:
    • Ext.form.field.ComboBox - valueField option isn't used, instead the value in the displayField option is used for the input value.
    • Also, this issue exists in Ext 4.1.0 for the three browsers I tried, but it works in IE8 using Ext 4.0.7.
    Steps to reproduce the problem:
    The result that was expected:
    • The value of the input should be the id of the record chosen, but instead it is the value displayed in the dropdown. If "Record# 1" is selected, the value displayed by the Alert should be "ID1"
    The result that occurs instead:
    • When "Record# 1" is selected, the value is "Record# 1"
    Test Case:
    see http://jsfiddle.net/5BJ4K/6/
    Code:
        
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        if(window.console && console.clear)
            console.clear();
    
        if(window.console && console.log)
            console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);
    
        var
            store = Ext.create("Ext.data.Store", {
                fields: [
                    { name: "id", type: "string" },
                    { name: "name", type: "string" }
                ],
                data: [
                    { id: "ID1", name: "Record# 1" },
                    { id: "ID2", name: "Record# 2" },
                    { id: "ID3", name: "Record# 3" },
                    { id: "ID4", name: "Record# 4" },
                    { id: "ID5", name: "aaa" },
                    { id: "ID6", name: "aaabbb" },
                    { id: "ID7", name: "aaabbbccc" }
                ]
            }),
            fieldComboBox = Ext.create("Ext.form.field.ComboBox", {
                store: store,
                valueField: "id",
                fieldLabel: "ComboBox",
                displayField: "name",
                queryMode: "local",
                editable: true,
                typeAhead: true,
                forceSelection: true,
                valueNotFoundText: "blah-blah-blah",
                width: 250,
                inputId: 'TestBox1'
            }),
            f = Ext.create("Ext.form.Panel", {
                frame: true,
                items: [
                    fieldComboBox
                ],
                dockedItems: [{
                    xtype: "toolbar",
                    dock: "top",
                    items: [{
                        text: "setValue()",
                        handler: function(btn, e) {
                            fieldComboBox.reset();
                            fieldComboBox.setValue("ID2");
                        }
                    }]
                }],
            }),
            w = Ext.create("Ext.window.Window", {
                title: "Test Ext.form.Panel",
                autoScrol: true,
                layout: "fit",
                autoDestroy: true,
                border: 0,
                buttons: [
                    {
                        text: "Value",
                        handler: function(btn, e) {
                            alert(document.getElementById("TestBox1").value);
                        }
                    }
                ],
                items: [f]
            });
    
        w.show();
    });
    HELPFUL INFORMATION

    Screenshot or Video:

    • N/A
    See this URL for live test case:
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP Pro

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376

    Default

    With Ext.form.field.ComboBox, the inputId will be assigned to the input text box of the combobox. This is where the displayField is displayed. So it contains value of displayField instead of valueField. To get the value of combobox, you should use <combobox>.getValue(). In your case, you should fix your code as below to get combobox value:
    Code:
            w = Ext.create("Ext.window.Window", {
                title: "Test Ext.form.Panel",
                autoScrol: true,
                layout: "fit",
                autoDestroy: true,
                border: 0,
                buttons: [
                    {
                        text: "Value",
                        handler: function(btn, e) {
                            //alert(document.getElementById("TestBox1").value);
                            alert(fieldComboBox.getValue());
                        }
                    }
                ],
                items: [f]
            });

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,254

    Default

    Agreed, this isn't a bug. Alternatively, you can use the hiddenName configuration if you're looking to do a "raw" form post.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •