You found a bug! We've classified it as EXTJS-7122 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    30
    Vote Rating
    2
    dpchrist is on a distinguished road

      1  

    Post Combo box type-ahead filtering remembers filter even after combo box is closed

    Combo box type-ahead filtering remembers filter even after combo box is closed


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • FF15 (Firebug 1.10.2 installed)
    • Chrome (latest update)
    DOCTYPE tested against:
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Description:
    • When typing in a value to a combobox (with local filtering), the list of values is filtered in the store as you type. However, the store filter is maintained after a value is chosen and the combobox list is closed. Because of this, you cannot programmatically (using setValue()) set the combo box to another valid value unless it happened to be in the last filtered list before the combo box was closed.
    Steps to reproduce the problem:
    • Run the attached code sameple
    • Click the button to see that the code will select 'South Carolina' in the combo box
    • Type and 'A' into the combo box to see it filter for 3 states that start with 'A' and choose one of those values
    • Click on the button again and it will blank out the list instead of setting it to 'South Carolina'.
    • Click to open the combo box, close it, then click the button again and it will work because opening the list clears combox box store filter.
    The result that was expected:
    • Once a value has been selected from the combo box and it has been closed, the store filter should be cleared. This will make setValue() calls works for any valid value in the combo box store.
    The result that occurs instead:
    • The combo box is blanked out even though a valid value is specified in the setValue() call.
    Test Case:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Combo Box setValue() 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.require('Ext.form.*');
    
    
                Ext.onReady(function() {
                    Ext.tip.QuickTipManager.init();
                    
                    var states = Ext.create('Ext.data.Store', {
                        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: 'button',
                                text: 'Change Dropdown to South Carolina',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vForm.getForm().findField('cb1').setValue('SC');
                                }
                            }
                        ]                    
                    });                
                });
            </script>
        </head>
    
    
        <body>
        </body>
    </html>
    HELPFUL INFORMATION

    Debugging already done:
    • Verified that the type-ahead filtering on the store is maintained even after the combo box value has been chosen and the combo box is closed.
    Possible fix:
    • The only workaround I have is to call comboboxfield.getStore().clearFilter() before every setValue() call. But that is inefficient and should not be required.
    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,144
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    1
    maikhorma is on a distinguished road

      0  

    Default


    I ran into this issue as well. My workaround is similar, but I attach to the "beforequery" event. Do we have any other (hopefully better) options?

    Code:
    Ext.define('MyClass', {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.reusable_select',
    
    
      //... all properties....
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                listeners: {
                    beforequery: {
                        fn: me.clearFilter,
                        scope: me
                    }
                }
            });
    
    
            me.callParent(arguments);
        },
    
    
        clearFilter: function(queryEvent, options) {
            if(queryEvent){
                queryEvent.combo.getStore().clearFilter();
            }
    
    
        }
    
    
    });

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    5
    Vote Rating
    0
    missett is on a distinguished road

      0  

    Default


    Hi guys, has there been any progress on this issue since it was first reported? We're experiencing what looks like the same issue (v4.1.3).

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    Something new about this?