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?
You can listen for tap events on clearIconContainerEl inside the text field or override the onClearIconTap method.
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 -
to be -
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.
For sencha touch 2.0 users:
If your using new mvc structure, you can use this in the controller init