Я пытаюсь создать собственный элемент управления ComboBox. Элемент управления будет иметь кнопку с обеих сторон самого ComboBox, что-то вроде этого:
[<-] [ --------------- V ] [->]
Этими кнопками будут «следующая» и «предыдущая», которые позволят пользователю быстро переключаться между опциями в раскрывающемся меню (перемещаясь вниз и вверх соответственно).
Я попытался переопределить конфигурацию defaultAutoCreate ComboBox, но у меня странное поведение. Вот что я попробовал до сих пор: (это все внутри пользовательского класса, расширяющего ComboBox)
initComponent: function () {
// default ComboBox structure
var comboStructure = {
tag: 'span',
children: [
{ tag: 'a', cls: 'nav prev', html: 'Previous' },
{ tag: 'input', type: 'text', size: '24', autocomplete: 'off' },
{ tag: 'a', cls: 'nav next', html: 'Next' }
]
};
console.log(comboStructure);
var config = {
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [
'myId',
'displayText'
],
data: [[1, 'Banner #1'], [2, 'Banner #2']]
}),
valueField: 'myId',
displayField: 'displayText',
defaultAutoCreate: comboStructure
};
Ext.apply(this, config);
IbwUi.controls.PreviewBannerSelectDropdown.superclass.initComponent(this);
}
Второй «потомок» comboStructure на самом деле является значением по умолчанию, которое инициализируется для ComboBox, я посмотрел исходный код. Код работает без ошибок, но при рендеринге самого комбо есть странное поведение, см. Здесь:
Есть идеи, как добавить мои пользовательские элементы вокруг ComboBox при рендеринге?