Bug: searchfield magnifying glass icon webkit & bb10

[truffles mcrooty]

Hi guys,

the magnifying glass icon in the search field xtype does not work on a BB10 device using webworks. It blocks out half the search bar.

Please help!

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[truffles mcrooty]

Hi,

just for other users experiencing the same issue - here's a workaround until the bug's fixed:

Use a textfield with placeHolder (so users know what to do) like so in your container which holds your dataview:

...
xtype: 'textfield',
itemId:'store_search',
placeHolder: 'Search for a Store'
...

And in your controller, create a function to handle the search functionality (on init of the controller - outside the config element) - adapted from (http://stackoverflow.com/questions/1...-search-list):

extend: 'Ext.app.Controller',
...
    init: function() {
        this.control({
            '#store_search': {
                scope: this,
                clearicontap: this.onSearchClearIconTap,
                keyup: this.onSearchKeyUp
            }
        });
    }
...

With associated functions in the same controller (again, outside the config element):

onSearchKeyUp: function(field) {  
        var value = field.getValue(), // get value to search 
        store = Ext.getStore('myStore');
        store.clearFilter(); // in-case of any current filters
  
        if (value) {  
            // splitting spaces for ease of search 
            var searches = value.split(' '), regexps = [], i;  
  
            for (i = 0; i < searches.length; i++) {  
                if (!searches[i]) continue;  
                regexps.push(new RegExp(searches[i], 'i')); // case insensitive
            }  
  
            // filter store by passing method  
            // passed method will be called for each record in store  
            store.filter(function(record) {  
                var matched = [];  
  
                // loop through each regular expression
                for (i = 0; i < regexps.length; i++) {  
                    var search = regexps[i], didMatch = record.get('myStoreFieldName').match(search);
                    matched.push(didMatch); // matched myStoreFieldName-> push into matches array   
                }             
  
                if (regexps.length > 1 && matched.indexOf(false) != -1) { // no match 
                    return false;  
                } else {  
                    return matched[0];  
                }  
            });  
        }  
    },  
  
    // Called when user taps on the clear icon in search field; simply removes filter from store 
    onSearchClearIconTap: function() {  
        Ext.getStore('myStore').clearFilter();  
    }

[dshookowsky]

This says that it was fixed in Touch 2.1.1, but I'm running 2.1.1 and I see that the icon is just a gray square. I searched the release-notes.html in the 2.1.1 and 2.2 downloads, and I don't see the issue number (Touch-3907) listed or any other issue related to searchfield except for "Fixed iffue[sic] with searchfield focus when setWidth() is called"