[FIXED][3.0rc1.1] Combo box doesn't setValue for empty text

**jburnhams** · 15 May 2009 1:15 AM

This is the same as this bug in Ext 2 which is still open.

Below is an example you can put in the examples directory.

Select an item from the list in each combo. Then empty the text in each combo and press the button, you can see that the one with the hidden field (combo2) has still retained the previous value. The problem seems to relate to the use of hiddenName. Combo 1 has a name while combo 2 just has a hidden name.

This doesn't just apply to empty text, if you type a value not in the list into each combo and click the button, then it only appears for combo1 - the combo that uses name not hiddenName.

Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
     <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="form/states.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.onReady(function(){

    var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},

            items: [{
                xtype: 'combo',
                fieldLabel: 'combo1',
                displayField:'state',
                mode: 'local',
                name: 'combo1',
                store: new Ext.data.SimpleStore({
                    fields: ['abbr', 'state', 'nick'],
                    data : Ext.exampledata.states // from states.js
                })
            },{
                xtype: 'combo',
                fieldLabel: 'combo2',
                displayField:'state',
                mode: 'local',
                hiddenName: 'combo2',
                store: new Ext.data.SimpleStore({
                    fields: ['abbr', 'state', 'nick'],
                    data : Ext.exampledata.states // from states.js
                })
            }],

            buttons: [{
                text: 'Press me',
                handler: function()
                {
                    Ext.MessageBox.alert('Combo contents', "1: "+simple.getForm().getValues().combo1+"<br />2: "+simple.getForm().getValues().combo2);
                }
            }]
        });

    simple.render(document.body);
});
</script>
</body>
</html>

**evant** · 15 May 2009 1:42 AM

It looks similar to this bug, is it the same kind of issue do you think?

http://extjs.com/forum/showthread.php?t=68403

**jburnhams** · 15 May 2009 2:02 AM

I thought it was at first but mystix said "totally different bug, me thinks." so I thought it better to create a new bug report than sidetrack the other.

**mystix** · 15 May 2009 2:14 AM

Originally Posted by jburnhams

I thought it was at first but mystix said "totally different bug, me thinks." so I thought it better to create a new bug report than sidetrack the other.

sorry about that.
i still think it looks different though.

**evant** · 15 May 2009 2:21 AM

Maybe they are distant cousins

**evant** · 18 May 2009 6:32 AM

They are similar issues.

Try the following patch:

Code:

Ext.override(Ext.form.ComboBox, {
    doForce : function(){
        if(this.forceSelection){
            if(this.el.dom.value.length > 0){
               this.el.dom.value = this.lastSelectionText === undefined ? '' : this.lastSelectionText;
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            this.setValue(this.getRawValue());
        }
    },

    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);

        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.inKeyMode = true;
                this.selectPrev();
            },

            "down" : function(e){
                if(!this.isExpanded()){
                    this.onTriggerClick();
                }else{
                    this.inKeyMode = true;
                    this.selectNext();
                }
            },

            "enter" : function(e){
                this.onViewClick();
                this.delayedCheck = true;
                this.unsetDelayCheck.defer(10, this);
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        this.queryDelay = Math.max(this.queryDelay || 10,
                this.mode == 'local' ? 10 : 250);
        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
        if(this.typeAhead){
            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
        }
        if(this.editable !== false){
        	this.mon(this.el, 'keyup', this.onKeyUp, this);
        }
        
        this.on('blur', this.doForce, this);
    }
});

**mystix** · 18 May 2009 8:41 PM

looks good.

one tiny adjustment is required to also resolve this bug reported by @condor:
("ComboBox forceSelection + emptyText")

Code:

Ext.override(Ext.form.ComboBox, {
    doForce : function(){
        if(this.forceSelection){
            if((this.el.dom.value.length > 0) && (this.el.dom.value != this.emptyText)){
               this.el.dom.value = this.lastSelectionText === undefined ? '' : this.lastSelectionText;
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            this.setValue(this.getRawValue());
        }
    },

    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);

        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.inKeyMode = true;
                this.selectPrev();
            },

            "down" : function(e){
                if(!this.isExpanded()){
                    this.onTriggerClick();
                }else{
                    this.inKeyMode = true;
                    this.selectNext();
                }
            },

            "enter" : function(e){
                this.onViewClick();
                this.delayedCheck = true;
                this.unsetDelayCheck.defer(10, this);
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        this.queryDelay = Math.max(this.queryDelay || 10,
                this.mode == 'local' ? 10 : 250);
        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
        if(this.typeAhead){
            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
        }
        if(this.editable !== false){
        	this.mon(this.el, 'keyup', this.onKeyUp, this);
        }
        
        this.on('blur', this.doForce, this);
    }
});

**jburnhams** · 19 May 2009 2:58 AM

Thanks, the override works great.

**mystix** · 20 May 2009 3:22 AM

i've been fiddling with keyboard events all day, and i'm proposing an alternative (and imho, cleaner) solution which is almost identical to the previous override i posted:

Code:

Ext.override(Ext.form.ComboBox, {
    doForce: undefined, // NO LONGER REQUIRED -- superceded by beforeBlur()

    beforeBlur : function(){
        if(this.forceSelection){
            if((this.el.dom.value.length > 0) && (this.el.dom.value != this.emptyText)){
               this.el.dom.value = this.lastSelectionText === undefined ? '' : this.lastSelectionText;
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            this.setValue(this.getRawValue());
        }
    },

    initEvents : function(){
        Ext.form.ComboBox.superclass.initEvents.call(this);

        this.keyNav = new Ext.KeyNav(this.el, {
            "up" : function(e){
                this.inKeyMode = true;
                this.selectPrev();
            },

            "down" : function(e){
                if(!this.isExpanded()){
                    this.onTriggerClick();
                }else{
                    this.inKeyMode = true;
                    this.selectNext();
                }
            },

            "enter" : function(e){
                this.onViewClick();
                this.delayedCheck = true;
                this.unsetDelayCheck.defer(10, this);
            },

            "esc" : function(e){
                this.collapse();
            },

            "tab" : function(e){
                this.onViewClick(false);
                return true;
            },

            scope : this,

            doRelay : function(foo, bar, hname){
                if(hname == 'down' || this.scope.isExpanded()){
                   return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
                }
                return true;
            },

            forceKeyDown : true
        });
        this.queryDelay = Math.max(this.queryDelay || 10,
                this.mode == 'local' ? 10 : 250);
        this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
        if(this.typeAhead){
            this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
        }
        if(this.editable !== false){
        	this.mon(this.el, 'keyup', this.onKeyUp, this);
        }

/*
        if (this.forceSelection) {
            this.on('blur', this.doForce, this);
        }
*/
    }
});

Ext.override(Ext.form.TimeField, {
    // private
    beforeBlur : function(){
        var v = this.parseDate(this.getRawValue());
        if(v){
            this.setValue(v.dateFormat(this.format));
        }

        Ext.form.TimeField.superclass.beforeBlur.call(this);
    }
});

this solution simply uses what's already there (ComboBox.beforeBlur() is currently set to Ext.emptyFn) and avoids an additional blur event handler.

**evant** · 20 May 2009 8:36 AM

Committed.

[FIXED][3.0rc1.1] Combo box doesn't setValue for empty text

Thread Tools

Search Thread

Display

[FIXED] [3.0rc1.1] Combo box doesn't setValue for empty text

[FIXED] [3.0rc1.1] Combo box doesn't setValue for empty text