CODEWITHSUNDEEP
searchsencha-touchextjs
StealzHelium
StealzHelium

Reputation: 115

How to add a listener to the x in the search field of Sencha?

I have a searchfield:

    this.searchField = new Ext.form.Search({
        placeHolder: 'Search by lastname',
    });

which works fine but I want to add a listener to the x in the box so that it not only clears what is written on the searchfield but also clears the filter I'm doing on the stores. I'm not sure what the name of it is so I don't know how to query it to add the listener.

I'm using Sencha Touch 1.1

Upvotes: 1

Views: 1597

Answers (2)

sunsay
sunsay

Reputation: 1560

Sencha Touch 2.x

this.searchField.on('clearicontap', function() {
   alert('cleared');
}, this);

Sencha Touch 1.x

this.searchField = new Ext.form.Search({
    placeHolder: 'Search by lastname',
    onClearIconTap: function() {
        if (!this.disabled) {
           this.setValue('');
           alert('cleared');
        }
    }
});

Or we can rewrite it to be more like 2.x:

  1. Somewhere in initialization of app we override Ext.form.Text component and add 'clearicontap' event:

    Ext.override('Ext.form.Text', {
    initComponent: function() {
        this.callOverridden(arguments);
        this.addEvents('clearicontap');
    },
    onClearIconTap: function() {
        if (!this.disabled) {
           this.setValue('');
           this.fireEvent('clearicontap');
        }
    }
});

  2. Now we can use it as in 2.x:

    this.searchField.on('clearicontap', function() {
    alert('cleared');
}, this);

All things above are not tested, sorry for errors if they exist.

NOTE: If anyone tries to add this inside a toolbar, there is a bug in Sencha 1.1 that will cause it to render incorrectly and the clearIcon appears outside of the textfield. In order to fix this simply addi the following code to the application.css file

.x-toolbar .x-field-clear-container {    
    min-height: 0;
    position: absolute;
    top: 2px;
    bottom: 1px;
    right: 5px;
    font-size: 0.8em;
    border-radius:20px;
}
.x-toolbar .x-input-search, .x-field-select,  .x-field-clearable {
    padding-right:1em;
}

Upvotes: 1

Naresh Tank
Naresh Tank

Reputation: 1568

You have to code like this

this.searchField = new Ext.form.Search({
placeHolder: 'Search by lastname',
listeners:{
  onClearIconTap: function() {
    if (!this.disabled) {
       this.setValue('');
       alert('cleared');
     }
  }
}

});

I hope this will work for you... thanks naresh

Upvotes: 0

Related Questions