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：

在app初始化的某个地方，我们重写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;
}

Answer 2

你必须像这样编码

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

});

我希望这对你有用...... 谢谢纳雷什

如何在Sencha的搜索字段中向x添加监听器？

2 个答案: