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

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

Answer 1

userId每次默认捕获所有Ext.button.Button和SPACE keydown事件并停止它们。因此，您的输入字段不会获得这些。您需要覆盖ENTER的这一部分。

Ext.button.Button

以下是完整的例子：
https://fiddle.sencha.com/#view/editor&fiddle/21em

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

1 个答案: