Как вставить другой компонент между Label и TextField в компонент ExtJS TextField?

Question

TextField, который прилагается компанией ExtJS 4.2.1, представляет собой в основном Label и TextField внутри Container, установленный на макет hbox.

мне нужно вставить ComboBox в между Label и TextField внутри Container.

Я пытался использовать extend класс TextField, но не могу найти ничего, что конкретно показывает соответствующий синтаксис для добавления компонента в другую иерархию компонентов.

Может кто-нибудь, пожалуйста, опубликуйте фрагмент кода ответа или ссылку на что-то, что объясняет кому-то, что является новым для 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); 
    } 

});