sencha touch textfield clear 事件

Posted 2023-02-26

【中文标题】sencha touch textfield clear 事件

【英文标题】：sencha touch textfield clear event

【发布时间】：2011-09-08 04:05:40

【问题描述】：

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

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

如果有人知道如何检测 sencha touch 中的文本字段清除，我将不胜感激。

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

【参考方案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!');
                
            
        );
    
);

【讨论】：

我覆盖了 onClearIconTap 以触发清除事件。如果 useClearIcon 设置为 true，则点击 onClearIconTap，然后我可以捕获 clear 事件。如果没有 onClearIconTap，这将永远无法工作。我很高兴被证明是错误的......感谢您的回答！

这也是一个很好的解决方案。是的，只有当 useClearIcon 为真时才有可能。 :)

它们都有效，onClearIconTap 覆盖方法和 clearIconContainerEl 点击事件。实际上它们或多或少是相同的，因为 clearIconContainerEl 点击事件触发了 onClearIconTap 方法，所以它更多的是架构决策而不是功能。这是运行的代码，你自己看看：lab.herkulano.com/sencha-touch/search-cleartap

【参考方案2】：

对于 sencha touch 2.0 用户：

如果你使用新的 mvc 结构，你可以在控制器初始化中使用它

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

【参考方案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, ...

现在，在我的搜索字段实现中，我可以创建一个名为 onSearch 的函数，该函数将在调用“搜索”事件时调用。请注意，“搜索”事件不仅针对 X 调用，还针对某些诸如回车键之类的东西调用。底线是 sencha touch 1.1 根本不检查此事件，这是 X 触发事件的唯一一次，因此唯一的解决方案是修改 sencha-touch.js。

【讨论】：

请注意，没有必要实际更改 sencha-touch.js 文件中的某些内容。因为这使得更新到较新版本的 Sencha 库变得非常困难。最好覆盖您自己文件中的功能。由于都是 javascript，这样做没有问题。