如何扩展Button组件并允许空间事件

Question

我想创建一个自定义组件。默认情况下，它将被折叠，只显示一个按钮(因此，我希望扩展button，而不是任何其他组件！)。当用户单击此按钮时，它将展开并显示其中的一些字段。我现在面临的问题(看起来像一个bug)是，在这些字段中键入空格字符是不可能的。我将代码最小化为几行：

    Ext.define('Ext.ux.CustomMenu', {
        extend: 'Ext.button.Button',
        alias: 'widget.custommenu',
        requires: [
            'Ext.XTemplate'
        ],
        autoEl: {},
        baseCls: Ext.baseCSSPrefix + 'test-btn',
        renderTpl: '<div class="foo"></div>',
        afterRender: function() {
            this.callParent();
            this.attachField();
        },
        attachField: function () {
            Ext.create("Ext.form.field.Text",{
                renderTo: this.el.query('.foo')[0]
            });
        }
    });

    Ext.create("Ext.ux.CustomMenu",{
        renderTo: document.getElementById("button")
    });

这是一个小提琴，它显示了这种奇怪的行为。那我怎么才能修好呢？请注意，我真的需要扩展Button组件。

Answer 1

Ext.button.Button捕获默认的所有SPACE和ENTER按键事件并停止它们。所以，您的输入字段没有得到这些。您需要覆盖Ext.button.Button的这一部分。

Ext.define('Ext.ux.CustomMenu', {
    extend: 'Ext.button.Button',
    ([...]

    onEnterKey: function (e) {
        if(e.type === 'keydown' && e.getKey() == e.SPACE)
        {
            return;
        }

        return this.callParent(arguments);
    }
});

以下是完整的示例：

https://fiddle.sencha.com/#view/editor&fiddle/21em