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. When I click the circular X button to clear the textfield, I'd like to reset the filter to filter none of the contacts.

The problem is, I can't seem to figure out a way to detect the click on the clear button. There doesn't appear to be any type of event, and I can't seem to hack in a workaround.

If anyone has any idea how to detect a textfield clearing in sencha touch, I'd be much obliged.

I've tried in safari and xcode simulator, and am using sencha touch 1.1.0. Am I missing something? Is this not an issue when it's actually a mobile app?

Answer 1

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!');
                }
            }
        });
    }
});