ExtJS - 为ComboBox创建自定义结构

Question

我正在努力创建一个自定义的ComboBox控件。控件将在ComboBox本身的任一侧有一个按钮，如下所示：

[<-]   [ --------------- V ]    [->]

这些按钮将是“下一个”和“上一个”，这将允许用户在下拉列表中的选项之间快速切换（分别向下和向上移动）。

我已经尝试覆盖ComboBox的defaultAutoCreate配置，但我得到了一些奇怪的行为。这是我到目前为止所尝试的内容:(这是在扩展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周围添加自定义元素的任何想法吗？

Answer 1

不要这样做。而是将所有三个组件放入一个实现所需逻辑的容器类中。