1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    359
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default Answered: [4.1.1] Combobox filtering using anyMatch

    Answered: [4.1.1] Combobox filtering using anyMatch


    Is there an easy way to have combobox's doQuery use an anyMatch filter?

    I see the following in the source:
    Code:
    me.activeFilter = new Ext.util.Filter({
    	root: 'data',
    	property: me.displayField,
    	value: queryString
    });
    But, I can't figure out a way to inject my own filter in there aside from returning false to the beforequery event then then manually suspending the store's events, doing a clearFilter() on the combo, filtering the store, refreshing the picker view, deselecting if the rawValue does not match the getDisplayValue(), and calling doAutoSelect().

    Hoping there's a tidy answer to this, but I'm not sure there is.

    Thoughts?

  2. Below are my solutions. They support anyMatch, exactMatch and caseSensitive.
    1. Solution for applying to all comboboxes:
    Code:
    Ext.define('Override.form.field.ComboBox', {
        override: 'Ext.form.field.ComboBox',
    
    
        doQuery: function(queryString, forceAll, rawQuery){
            var me = this;
    
    
            if(queryString && queryString.length >= me.minChars){
                queryString = Ext.String.escapeRegex(queryString);
                if (me.anyMatch !== true) {
                    queryString = '^' + queryString;
                    if (me.exactMatch === true) {
                        queryString += '$';
                    }
                }
    
    
                queryString = new RegExp(queryString, me.caseSensitive ? '' : 'i');
                queryString.length = me.minChars; // this is a trick
            }
            me.callParent([queryString, forceAll, rawQuery]);
        }
    });
    2. Solution for applying to a specific combobox instance:
    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listeners: {
            beforequery: function(query){
                var me = this;
                var queryString = query.query || '';
    
    
                if(queryString.length >= me.minChars){
                    queryString = Ext.String.escapeRegex(queryString);
                    if (me.anyMatch !== true) {
                        queryString = '^' + queryString;
                        if (me.exactMatch === true) {
                            queryString += '$';
                        }
                    }
    
    
                    query.query = new RegExp(queryString, me.caseSensitive ? '' : 'i');
                    query.query.length = me.minChars; // this is a trick
                }
            }
        }
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Below are my solutions. They support anyMatch, exactMatch and caseSensitive.
    1. Solution for applying to all comboboxes:
    Code:
    Ext.define('Override.form.field.ComboBox', {
        override: 'Ext.form.field.ComboBox',
    
    
        doQuery: function(queryString, forceAll, rawQuery){
            var me = this;
    
    
            if(queryString && queryString.length >= me.minChars){
                queryString = Ext.String.escapeRegex(queryString);
                if (me.anyMatch !== true) {
                    queryString = '^' + queryString;
                    if (me.exactMatch === true) {
                        queryString += '$';
                    }
                }
    
    
                queryString = new RegExp(queryString, me.caseSensitive ? '' : 'i');
                queryString.length = me.minChars; // this is a trick
            }
            me.callParent([queryString, forceAll, rawQuery]);
        }
    });
    2. Solution for applying to a specific combobox instance:
    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listeners: {
            beforequery: function(query){
                var me = this;
                var queryString = query.query || '';
    
    
                if(queryString.length >= me.minChars){
                    queryString = Ext.String.escapeRegex(queryString);
                    if (me.anyMatch !== true) {
                        queryString = '^' + queryString;
                        if (me.exactMatch === true) {
                            queryString += '$';
                        }
                    }
    
    
                    query.query = new RegExp(queryString, me.caseSensitive ? '' : 'i');
                    query.query.length = me.minChars; // this is a trick
                }
            }
        }
    });

  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    359
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    That'll certainly do it.
    My premium support subscription expired and I'm trying to go convince my leadership to purchase a renewal.

    In the meantime, any chance you'd put in a feature request for a typeAheadMatch config option through the intake forum?

Thread Participants: 1