我正在尝试在 sencha touch 的文本字段中实现列表过滤器。例如，我有一堆联系人，当我在字段中输入时，它可能会按名称过滤。当我单击圆形 X 按钮清除文本字段时，我想重置过滤器以不过滤任何联系人。
问题是，我似乎无法找到检测清除按钮点击的方法。似乎没有任何类型的事件，而且我似乎无法破解解决方法。
如果有人知道如何检测 sencha touch 中的文本字段清除，我将不胜感激。
我已经在 safari 和 xcode 模拟器中尝试过，并且正在使用 sencha touch 1.1.0。我错过了什么吗？当它实际上是一个移动应用程序时，这不是问题吗？
【问题讨论】：
标签： sencha-touch
您可以在文本字段内的 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!');
}
}
});
}
});
【讨论】：
对于 sencha touch 2.0 用户：
如果你使用新的 mvc 结构，你可以在控制器初始化中使用它
this.control({
'#yourTextFieldId clearicon': {
tap: function(){console.log('ClearICON tapped');}
}
....
)};
【讨论】：
问题是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。
【讨论】：