Ext version tested:

  • Ext 4.1.2
Browser versions tested against:
  • Firefox (latest w/ Firebug)
  • Chrome (latest)
DOCTYPE tested against:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  • If you have a ComboBox with a 'select' event attached, the event will be triggered if you type in a value and tab off the field. If you type in a value and use the mouse to select another field (or just click off the field), the select event will not be fired.
Steps to reproduce the problem:
  • Open the example provided
  • Type in "Alaska" into the combo box field and tab off the field
  • Notice the message box showing the event has fired
  • Now type "Alabama" into the dropdown and instead of tabbing off the field, click somewhere else on the screen with the mouse
  • Notice the event is not fired. So it is possible to enter a valid value from the dropdown but have no way to trap that event if the user uses the mouse to move off the combo box
The result that was expected:
  • The 'select' event should be fired
The result that occurs instead:
  • No 'select' event is fired
Test Case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Combo Box Issue</title>

        <link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css" />

        <script type="text/javascript"  src="../extjs4/ext-debug.js"></script>

        <script type="text/javascript">

            Ext.onReady(function() {
                var states = Ext.create('', {
                    fields: ['abbr', 'name'],
                    data : [
                        {"abbr":"AL", "name":"Alabama"},
                        {"abbr":"AK", "name":"Alaska"},
                        {"abbr":"AZ", "name":"Arizona"},
                        {"abbr":"NC", "name":"North Carolina"},
                        {"abbr":"SC", "name":"South Carolina"}

                var form = Ext.createWidget('form', {
                    renderTo:  Ext.getBody(),
                    title: 'Combo box test',
                    bodyPadding: 5,
                    frame: true,
                    width: 340,
                    fieldDefaults: {
                        labelAlign: 'left',
                        labelWidth: 105,
                        anchor: '100%'
                    items: [{
                            xtype: 'combo',
                            fieldLabel: 'Combo Box:',
                            name: 'cb1',
                            forceSelection: true,
                            displayField: 'name',
                            valueField: 'abbr',
                            store: states,
                            queryMode: 'local'
                            xtype: 'textfield',
                            fieldLabel: 'Text Field:',
                            name: 'tf1'
                var selectEvent = function() {
                    alert('Event Fired');
                var combobox = form.down('combo');
                combobox.on('select', selectEvent, this);


Debugging already done:

  • I have stepped through code (including beforeBlur), but the events for firing 'select' seem to be tied only to clicking on a combo box item and a keyboard event for tabbing off the field.
Possible fix:
  • not provided
Operating System:
  • Windows 7 Enterprise