Search 如何将侦听器添加到Sencha搜索字段中的x？

我有一个搜索字段：

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

这很好，但我想在框中的x中添加一个侦听器，这样它不仅可以清除在searchfield中写入的内容，还可以清除我在stores中执行的过滤器。 我不确定它的名称，所以我不知道如何查询它来添加侦听器

我正在使用Sencha Touch 1.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：

在应用程序初始化的某处，我们覆盖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.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;
}

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：

在应用程序初始化的某处，我们覆盖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.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;
}

---

你必须这样编码

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

});

我希望这对你有用。。。 谢谢

---

naresh

您必须这样编码

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

});

我希望这对你有用。。。 谢谢

---

naresh

这只适用于Sencha Touch 2.0，我应该指定我使用的是1.1年，感谢它工作得很好。我要补充的一点是，如果有人在工具栏内执行此操作，Sencha 1.1中会出现一个错误，导致它无法按预期进行渲染，图标会在框外渲染。解决这个问题的方法是简单地在css文件中添加一些代码，我会将其编辑到您的答案中。这只适用于Sencha Touch 2.0，我应该指定我使用的是1.1年，谢谢，它工作得很好。我要补充的一点是，如果有人在工具栏内执行此操作，Sencha 1.1中会出现一个错误，导致它无法按预期进行渲染，图标会在框外渲染。解决这个问题的方法是简单地在css文件中添加一些代码，我将把它编辑到您的答案中。