Javascript 如何扩展按钮组件并允许空间事件

我想创建一个自定义组件。默认情况下，它将被折叠并仅显示一个按钮（因此，我希望扩展按钮，而不是任何其他组件！）。当用户单击此按钮时，它将展开并显示其中的一些字段。我现在面临的问题（看起来像一个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")
    });

Ext.define（'Ext.ux.CustomMenu'{
扩展：“Ext.button.button”，
别名：“widget.custommenu”，
要求：[
“Ext.XTemplate”
],
autoEl:{}，
baseCls:Ext.baseCSSPrefix+‘测试btn’，
renderTpl:“”，
afterRender:function（）{
这是callParent（）；
这个.attachField（）；
},
附件字段：函数（）{
Ext.create（“Ext.form.field.Text”{
renderTo:this.el.query（'.foo'）[0]
});
}
});
Ext.create（“Ext.ux.CustomMenu”{
renderTo:document.getElementById（“按钮”）
});

---

这是一个，显示了这种奇怪的行为。那么，我该如何修复它呢？请注意，我真的需要扩展按钮组件

Ext.button.button

默认捕获所有

SPACE

和

ENTER

keydown事件并停止它们。所以，您的输入字段没有得到这些。 您需要覆盖

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

以下是完整的示例：

---

“我真的需要扩展按钮组件。”您可能不需要。只描述问题，而不是你已经决定的解决方案。