sencha touch textfield clear event

Question

I\'m trying to implement a list filter in a text field in sencha touch. For example, I\'d have a bunch of contacts, and when I typed in the field, it might filter by name. W

Answer 1

For sencha touch 2.0 users:

If your using new mvc structure, you can use this in the controller init

this.control({    
     '#yourTextFieldId clearicon': {
          tap: function(){console.log('ClearICON tapped');}
     }
....
)};

Answer 2

You can listen for tap events on clearIconContainerEl inside the text field or override the onClearIconTap method.

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

        var searchField = new Ext.form.Search({
            name : 'search',
            placeHolder: 'Search',
            useClearIcon: true,

            onClearIconTap: function() {
                if (!this.disabled) {
                    this.setValue('');
                    console.log('onClearTap: Clear button tapped!');                       
                }
            }
        });

        var viewport = new Ext.Panel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [searchField]
            }]
        });

        console.log(searchField.useClearIcon);

        searchField.mon(searchField.clearIconContainerEl, {
            scope: searchField,
            tap: function() {
                if (!this.disabled) {
                    console.log('clearIconContainerEl: Clear button tapped!');
                }
            }
        });
    }
});

Answer 3

The problem is the little X is not added in by sencha touch. It is a feature of the "search" input with html5. To capture this event you need to look for the search event. How I solved this was I edited sencha-touch.js

I modified -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            scope: this
        });

to be -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            search: this.onSearch,
            scope: this
        });

inside of Ext.form.Text = Ext.extend(Ext.form.Field, { ...

Now in my implementation of the searchfield I can make a function called onSearch which will be called when the "search" event is called. Note that the "search" event is not only called for the X but for some things like the enter key. The bottom line is sencha touch 1.1 does not check for this event at all and it is the only time the X fires an event so the only solution is to modify sencha-touch.js.