Как расширить компонент Button и разрешить событие пробела

Question

Как расширить компонент Button и разрешить событие пробела

1

Я хочу создать пользовательский компонент. По умолчанию он будет свернут и покажет только кнопку (поэтому я хочу продлить Button, а не любой другой компонент!). Когда пользователь нажимает на эту кнопку, он будет расширяться и отображать некоторые поля внутри него. Проблема, с которой я сталкиваюсь сейчас (которая выглядит как ошибка), заключается в том, что невозможно ввести символ пробела внутри этих полей. Я минимизировал свой код только до нескольких строк:

    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.

Jacobian 13 июнь 2017, в 23:59

Источник

Теги:

javascript

extjs

1 ответ

Ещё вопросы

Artem Stepin · Accepted Answer · 2017-06-13T19-45-00.000Z

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

Спасибо вам большое! Оно работает!