如何在ExtJS TextField組件中的Label和TextField之間插入另一個組件？

Question

由ExtJS 4.2.1提供的TextField基本上是一個Label和一個TextField，其中Container設置爲佈局hbox。

我需要在Container內的Label和TextField之間插入ComboBox。

我試過extendTextField類，但找不到任何具體顯示將組件添加到其他組件層次結構的適當語法的任何內容。

有人可以發佈一個答案代碼片段或鏈接到某人是一個全新的ExtJS解釋如何擴展組件和修改它，就像我試圖？

我只需要指出正確的方向，我想我可以運行它。

Answer 1

您正在尋找Ext.form.field.FieldContainer

這是最簡單的例子：

Ext.create('Ext.form.Panel', { 
    title: 'FieldContainer Example', 
    width: 550, 
    bodyPadding: 10, 

    items: [{ 
     xtype: 'fieldcontainer', 
     fieldLabel: 'Last Three Jobs', 
     labelWidth: 100, 
     layout: 'hbox', 
     items: [{ 
      xtype: 'combo', 
       store: { 
       fields: ['abbr', 'name'], 
       data : [ 
        {"abbr":"AL", "name":"Alabama"}, 
        {"abbr":"AK", "name":"Alaska"}, 
        {"abbr":"AZ", "name":"Arizona"} 
       ] 
      }, 
      queryMode: 'local', 
      displayField: 'name', 
      valueField: 'abbr', 
      flex: 1 
     }, { 
      xtype: 'splitter' 
     }, { 
      xtype: 'textfield', 
      flex: 1 
     }] 
    }], 
    renderTo: Ext.getBody() 
}); 

您也可以作出的FieldContainer作爲一個單一的領域。快速的解釋：

• 混入的Ext.form.field.Field
• 設置內場submitValue到false

Answer 2

基於由@sra提供的答案，這是我結束了。代碼從Sencha Architect中提取。

Ext.define('MyApp.view.MyForm', { 
    extend: 'Ext.form.Panel', 

    height: 250, 
    width: 680, 
    bodyPadding: 10, 
    title: 'My Form', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'fieldcontainer', 
        height: 22, 
        layout: { 
         align: 'stretch', 
         type: 'hbox' 
        }, 
        fieldLabel: 'Label', 
        items: [ 
         { 
          xtype: 'combobox', 
          fieldLabel: 'Label', 
          hideLabel: true 
         }, 
         { 
          xtype: 'textfield', 
          flex: 1, 
          fieldLabel: 'Label', 
          hideLabel: true 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

});