Javascript 在EXT JS应用程序搜索文本框中添加了一个enter事件以启动搜索
嗨,我有下面的代码,我的输入事件永远不会触发,任何帮助将不胜感激Javascript 在EXT JS应用程序搜索文本框中添加了一个enter事件以启动搜索,javascript,extjs,keyboard-events,enter,Javascript,Extjs,Keyboard Events,Enter,嗨,我有下面的代码,我的输入事件永远不会触发,任何帮助将不胜感激 items: [{ xtype: 'textfield', id: 'idhere', name: 'namehere', fieldLabel: 'lablehere:', width: 500, handler: { key:13,
items: [{
xtype: 'textfield',
id: 'idhere',
name: 'namehere',
fieldLabel: 'lablehere:',
width: 500,
handler: {
key:13,
fn : function () {
if (e.getKey() == e.ENTER) {
alert("You pressed an enter button in text field.");
}
}
}
},{
xtype: 'button',
text: 'texttodisplay',
handler: function() {
//my function.
}
}]
实际上,我通过以下方法解决了这个问题:
listeners: {
specialkey: function (f,e) {
if (e.getKey() == e.ENTER) {
loadData();
}
}
}
我不知道为什么Sencha从未在API文档中包含
Ext.ux.form.SearchField
,但该组件已包含在我使用的所有框架版本中。它设置为触发submit
和cancel
事件,并包括附加到字段的相应搜索和取消按钮
您可以在以下框架文件中找到它:[extjs root]\examples\ux\form\SearchField.js
我建议使用该组件,而不是尝试创建自己的搜索字段。我通常会覆盖默认的搜索功能以满足我自己的需要,但也有一些情况下我不需要这样做
如果在组件JS的顶部添加requires语句,则可以像创建任何其他(非UX)组件一样创建它:
例如:
要求声明:
Ext.define('MyApp.view.SomeComponent', {
extend: 'Ext.grid.Panel',
alias: 'widget.mycomponent',
requires: [
'Ext.ux.form.SearchField'
],
...
在面板底部工具栏中创建搜索字段:
bbar: {
items: [{
text: 'A Button'
}, {
text: 'Another Button'
}, '-', {
xtype: 'searchfield', // <- can use this xtype with requires stmt
itemId: 'search',
width: 250,
emptyText: 'Enter first and last name to search...'
}]
},
...
仅提供如何添加这样的侦听器。有一个
specialkey
事件可用于此类情况
fieldinstance.on('specialkey', function(f, e){
if (e.getKey() == e.ENTER) {
// your action
}
});
无论如何,我建议使用提到的ux组件,这是我第一次听说这个ux字段:)+1我想文档丢失了,因此它没有出现在api中。
fieldinstance.on('specialkey', function(f, e){
if (e.getKey() == e.ENTER) {
// your action
}
});