sencha touch textfield clear event

问题:

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?

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

回答2:

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

回答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.