ExtJS - 爲組合框創建自定義結構

我正在試圖創建一個自定義組合框控件。該控件將有一個按鈕的組合框本身的兩側，這樣的事情：ExtJS - 爲組合框創建自定義結構

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

這些按鈕將是「下一個」和「上」，這將允許用戶在下拉選項之間進行快速切換（分別向下和向上移動）。

我試過覆蓋ComboBox的defaultAutoCreate配置，但我收到了一些奇怪的行爲。這是我到目前爲止已經試過：（這是所有裏面的自定義類擴展組合框的）

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的第二個「孩子」，其實是獲取組合框初始化的默認值，我看着源代碼。代碼工作沒有錯誤，但有與組合本身的呈現一些奇怪的行爲，在這裏看到：

Weird DOM display