Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    27
    Vote Rating
    1
    gubespam is on a distinguished road

      0  

    Default [FIXED-EXTJSIV-573]Reset or clear value of a combo box

    [FIXED-EXTJSIV-573]Reset or clear value of a combo box


    Originally posted in Help forum.

    Using Ext 4.0-beta-1.

    I have a combo box whose value I would like to clear as a result of a user action. I can successfully "clear" the combo box so that it visually appears to be cleared, but after doing so, the combobox will no longer allow the user to select the same value again (eg. user selects "Rover", clicks "Clear", then tries to select "Rover" again). The combobox just ignores these clicks until the user selects a different value than before. The example below shows that Ext doesn't even fire the "select" event when the user the same value after the clear.

    Code:
    Ext.regModel('Dog', {
        fields: [
            'name'
        ]
    });
    
    var petStore = new Ext.data.Store({
        model: 'Dog',
        data: [
           {id:123,name:'Rover'},
           {id:456,name:'Alfred'}
        ]
    });
    
    // ComboBox with list of clients
    var petCombo = new Ext.form.ComboBox({
        id: 'pet-combo',
        name : 'dog',
        valueField: 'name',
        displayField: 'name',
        allowBlank: false, // doesn't seem to do anything
        emptyText : "Pick a pet",
        fieldLabel: "Dog",
        store: petStore,
        queryMode: 'local',
        forceSelection: true,
        listeners:{
            scope: this,
            'select': function(cmb, recs, idx) {
                console.log('selected:' + (recs.length > 0 ? recs[0].get('name') : undefined));
            }
        },
    });
    
    var petForm = Ext.create('Ext.form.FormPanel', {
        frame : true,
        title : "Pet Store",
        width : 150,
        fieldDefaults : {
            labelWidth : 50
        },
        items: [
            petCombo,
        {
            xtype: 'button',
            text : "Clear",
            handler : function() {
                petForm.getForm().reset();
                var cc = Ext.getCmp('pet-combo');
                cc.clearValue();
                cc.reset();
                cc.setValue("");
                cc.setValue(null);
                cc.setValue(undefined);
            }
        } ]
    });
    After digging around in the Ext 4 source code and trying various options, I found a workaround.

    It appears that the root of the problem is in ComboBox.setValue(). This method ignores empty values (like undefined), but not empty arrays. As a result, reset() effectively does nothing when no original value is specified for the combo box, because originalValue=undefined and reset() calls setValue(originalValue). On the other hand, clearValue() calls setValue() with an empty array.

    Ultimately, the reason users cannot re-select the value that was selected before (even after calling clearValue()), is that the selection model still thinks something is selected. It thinks this because setValue() does not update the selection model when passed 'undefined' or an empty array.

    The following workaround seems to work as desired (clear value, reset "unselected text" and allow user to select previous value again):

    Code:
    cc.clearValue();
    cc.applyEmptyText();
    cc.getPicker().getSelectionModel().doMultiSelect([], false);

  2. #2
    Sencha User jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    567
    Vote Rating
    20
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Hmm, all of this would have made sense if it were PR5, but these exact issues were addressed for the beta1 release and I'm unable to reproduce the problem using your code. Are you sure this is still an issue?

    Specifically, the setValue method now has at the top:
    Code:
    value = Ext.Array.from(value);
    which will convert null or undefined values to an empty array, so the selection model will get updated.

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    27
    Vote Rating
    1
    gubespam is on a distinguished road

      0  

    Default


    Thanks. I've confirmed things are working using only a form.reset(), with beta 1.

  4. #4
    Sencha User jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    567
    Vote Rating
    20
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Excellent, thanks for verifying.

Similar Threads

  1. Replies: 4
    Last Post: 22 Aug 2011, 1:40 PM
  2. Reset or clear value of a combo box
    By gubespam in forum Ext: Discussion
    Replies: 3
    Last Post: 4 Apr 2011, 1:53 PM
  3. Replies: 1
    Last Post: 3 Apr 2011, 4:31 PM
  4. Replies: 0
    Last Post: 28 Mar 2011, 4:14 AM
  5. Replies: 0
    Last Post: 21 Mar 2011, 1:00 PM

Thread Participants: 1

Tags for this Thread