3

嗨，我的输入事件下面的代码永远不会触发，我们将不胜感激。

    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();
                    }
                }
            }
4

2 回答 2

7

我不确定为什么 Sencha 从未包含Ext.ux.form.SearchField在 API 文档中，但该组件已包含在我使用过的所有版本的框架中。它被设置为触发一个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...'
    }]
},
...

如果您对 requires 语句有疑问，您也可以像这样创建它：

var search = Ext.create('Ext.ux.form.SearchField', {
    itemId: 'search',
    width: 250,
    emptyText: 'Enter first and last name to search...'
});
于 2013-02-01T19:12:02.800 回答
2

只是为了提供如何添加这样的监听器。有一个specialkey事件可以用于这种情况

fieldinstance.on('specialkey', function(f, e){
    if (e.getKey() == e.ENTER) {
        // your action
    }
});

无论如何，我建议使用@Geronimo提到的 ux 组件

于 2013-02-01T19:59:46.607 回答