Question

我正在尝试在sencha touch中的文本字段中实现列表过滤器。例如，我有一堆联系人，当我输入字段时，它可能会按名称进行过滤。当我单击圆形X按钮清除文本字段时，我想重置过滤器以过滤掉所有联系人。

问题是，我似乎无法找到一种方法来检测清除按钮上的点击。似乎没有任何类型的事件，我似乎无法破解解决方法。

如果有人知道如何在sencha touch中检测文本字段清除，我会非常感激。

我已经尝试过safari和xcode模拟器，并且正在使用sencha touch 1.1.0。我错过了什么吗？当它实际上是移动应用程序时，这不是问题吗？

Answer 1

您可以在文本字段内的 clearIconContainerEl 上收听点击事件，或覆盖 onClearIconTap 方法。

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

        var searchField = new Ext.form.Search({
            name : 'search',
            placeHolder: 'Search',
            useClearIcon: true,

            onClearIconTap: function() {
                if (!this.disabled) {
                    this.setValue('');
                    console.log('onClearTap: Clear button tapped!');                       
                }
            }
        });

        var viewport = new Ext.Panel({
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [searchField]
            }]
        });

        console.log(searchField.useClearIcon);

        searchField.mon(searchField.clearIconContainerEl, {
            scope: searchField,
            tap: function() {
                if (!this.disabled) {
                    console.log('clearIconContainerEl: Clear button tapped!');
                }
            }
        });
    }
});

Answer 2

对于sencha touch 2.0用户：

如果你使用新的mvc结构，你可以在控制器init

中使用它

this.control({    
     '#yourTextFieldId clearicon': {
          tap: function(){console.log('ClearICON tapped');}
     }
....
)};

Answer 3

问题是通过sencha touch没有添加小X.这是html5的“搜索”输入的一个功能。要捕获此事件，您需要查找搜索事件。我是如何解决这个问题的，我编辑了sencha-touch.js

我修改了 -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            scope: this
        });

是 -

    if (this.fieldEl) {
        this.mon(this.fieldEl, {
            focus: this.onFocus,
            blur: this.onBlur,
            keyup: this.onKeyUp,
            paste: this.updateClearIconVisibility,
            mousedown: this.onBeforeFocus,
            search: this.onSearch,
            scope: this
        });

在Ext.form.Text = Ext.extend内部（Ext.form.Field，{...

现在在我的searchfield实现中，我可以创建一个名为onSearch的函数，该函数将在调用“search”事件时被调用。请注意，“搜索”事件不仅针对X调用，还针对某些内容（如enter键）调用。底线是sencha touch 1.1根本不检查此事件，并且它是唯一一次X触发事件，因此唯一的解决方案是修改sencha-touch.js。

sencha touch textfield清除事件

3 个答案: