Reset combobox when forceSelection = true and user can edit the combobox

Question

I have a combobox which have a config 'forceSelection: true'. User can edit the combobox, for example: type in arbitrary text, then immediately click the reset button to reset the combobox but the combobox won't reset to its original value. How could I fix this?

Here's my code to describe the problem:

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.container.Container', {

    layout: 'hbox',

    margin: '50',

    renderTo: Ext.getBody(),

    items: [
        {
            xtype: 'combobox',
            margin: '0 10 0 0',
            fieldLabel: 'Choose State',
            forceSelection: true,
            store: states,
            queryMode: 'local',
            value: 'AL',
            displayField: 'name',
            valueField: 'abbr'

        },
        {
            xtype: 'button',
            text: 'reset',
            handler: function () {
                this.up('container').down('combobox').reset();
            }
        }
    ]
   });
   });

Answer 1

Hi Plz update your button handler with these code it is working fine at my end even foreceSelection is enabled.

                        {
                            xtype: 'button',
                            text: 'reset',
                            handler: function () {
                                  var combo=this.up('container').down('combobox');
                                  combo.lastSelection ="Alabama";
                                  combo.setRawValue(combo.lastSelection);
                                  combo.callParent(arguments)
                            }
                        }

Answer 2

Try with these example..

                Ext.onReady(function(){

                  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.container.Container', {

                    layout: 'hbox',

                    margin: '50',

                    renderTo: Ext.getBody(),

                    items: [
                        {
                            xtype: 'combobox',
                            margin: '0 10 0 0',
                            fieldLabel: 'Choose State',
                            store: states,
                            queryMode: 'local',
                            value: 'AL',
                            displayField: 'name',
                            valueField: 'abbr'

                        },
                        {
                            xtype: 'button',
                            text: 'reset',
                            handler: function () {
                                 this.up('container').down('combobox').setValue("Alabama");
                            }
                        }
                    ]
                   });
                 });