1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    Answers
    1
    ChrisOhB is on a distinguished road

      0  

    Default Answered: ComboBox: Making it optional (empty), and forcing only selection list

    Answered: ComboBox: Making it optional (empty), and forcing only selection list


    Let's say I have a combobox. I can't seem to figure out the right combination of config settings.
    Code:
    Ext.widget({    xtype: 'combo',
        renderTo: Ext.getBody(),
        fieldLabel: 'Neighborhood',
        store: ['Ballard', 'Fremont', 'Interbay', 'Queen Anne'],
        // TODO
    });
    What I'd like to do is make the field optional (can be empty), but if there is a value in the text field, then it has to be a value from in the list.

    It can be typed in or selected from the list. If a user types in a value in the list or selects one from the list, the user should then be able to go back to the field and delete the text to clear the field, leaving it empty.

    Here's what I tried:
    Code:
    Ext.widget({
        xtype: 'combo',
        renderTo: Ext.getBody(),
        fieldLabel: 'Neighborhood',
        store: ['Ballard', 'Fremont', 'Interbay', 'Queen Anne'],
        forceSelection: true,
        allowBlank: true
    });
    It didn't work. The "forceSelection: true" appears to restore the last selection if I choose a list item, then delete the field text and cause a blur on the field. I thought "allowBlank: true" would allow for the field value to be deleted, without invoking the behavor of "forceSelection." Apparently not.
    Is there no way to make the combo act like an optional <select>?

  2. You will need to insert an 'empty' entry to the store .. so it can deselect.

    Scott.

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi ChrisOhB,

    Use "typeAhead : true" config, like -
    Code:
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    
    Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        forceSelection:true,
        typeAhead:true,
        displayField: 'name',
        valueField: 'abbr',
        renderTo: Ext.getBody()
    });
    For more information read API docs - http://docs.sencha.com/ext-js/4-1/#!...-cfg-typeAhead
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    Answers
    1
    ChrisOhB is on a distinguished road

      0  

    Default


    Thanks for the reply. Unfortunately, I still cannot leave the field blank after selecting a value. For example:

    http://jsfiddle.net/bmsLn/

    Go to that link and try to delete the value without having the combo restore its value afterward. I don't see how to do this.

    Am I missing something? What key strokes or mouse actions do I need to perform to delete the value out of one of those text boxes in the link without causing the value to be restored after I delete the text?

    Just to clarify the requirements:
    1. No text is required in the field
    2. But if there is text, it must be a selection (match the value of) an item in the list.
    3. If user enters texts or makes selection, the user should be able to leave the field, then come back and blank it out. (Same thing is 1.)

    Does that make sense?

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You will need to insert an 'empty' entry to the store .. so it can deselect.

    Scott.

  6. #5
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    9
    Vote Rating
    0
    Answers
    1
    ChrisOhB is on a distinguished road

      0  

    Default


    Ah, that's the key, Scott! Thanks--it beats my workaround:
    Code:
    assertValue: function () {
        var rawValue = this.getRawValue(),
            blankBefore = !Ext.String.trim(rawValue).length,
            result = Ext.form.field.ComboBox.prototype.assertValue.apply(this, arguments),
            blankAfter = !Ext.String.trim(this.getRawValue()).length,
            restored = (blankBefore && !blankAfter);
    
        if (this.forceSelection && !this.multiSelect && this.allowBlank && restored) {
            this.setValue('');
        }
    }