Как добавить слушателя к x в поле поиска Sencha?

Question

У меня есть поле поиска:

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

, который работает нормально, но я хочу добавить прослушиватель к x в поле, чтобы он не только очищал то, что написано в поле поиска, но и очищал фильтр, который я делаю в магазинах. Я не уверен, как его назвать, поэтому я не знаю, как запросить его, чтобы добавить слушателя.

Я использую Sencha Touch 1.1

Answer 1

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

Или мы можем переписать его, чтобы оно было больше похоже на 2.x:

1. Где-то при инициализации приложения мы перезаписываем компонент Ext.form.Text и добавляем событие 'clearicontap':

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

2. Теперь мы можем использовать его как в 2.x:

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

Все вышеперечисленное не проверено, извините за ошибки, если они существуют.

ПРИМЕЧАНИЕ. Если кто-то попытается добавить это на панели инструментов,это ошибка в Sencha 1.1, которая приводит к некорректной визуализации, и clearIcon появляется за пределами текстового поля.Чтобы это исправить, просто добавьте следующий код в файл application.css

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

Answer 2

Вы должны написать такой код

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

});

Надеюсь, это сработает для вас ... спасибо naresh