Я хочу создать пользовательский компонент. По умолчанию он будет свернут и покажет только кнопку (поэтому я хочу продлить 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.
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