Hinzufügen von Button neben einem Kombinationsfeld in extjs

Question

Ich habe ein Panel, wo ich 2combo-Boxen haben. Ich muss eine Schaltfläche neben einem der Kombinationsfelder hinzufügen. Sowohl das Kombinationsfeld und Schaltfläche in der gleichen line.Below kommen ist mein Panel

filterPanel = new Ext.Panel({ 
     renderTo: document.body, 
      bodyStyle: 'padding-top: 6px;', 
    title: 'Filters', 
     collapsible: true, 
     collapsed: true, 
     shadow: 'sides', 
     width: 400, 
     frame: true, 
     floating: true, 
     layout: 'form', 
     labelWidth: 150, 
     buttonAlign: 'center', 
     items: [ 
      { 
       xtype: 'combo', 
       id: 'xFilter', 
       width: 200, 
       listWidth: 200, 
       fieldLabel: 'Filter', 
       store: filterStore, 
       displayField:'filterDisp', 
       valueField:'filterVal', 
       typeAhead: true, 
       editable: true, 
       mode: 'local', 
       forceSelection: true, 
       triggerAction: 'all', 
       selectOnFocus:false 
      },{ 
       xtype: 'combo', 
       id: 'xStatus', 
       width: 200, 
       listWidth: 200, 
       fieldLabel: 'Status', 
       store: statusStore, 
       displayField:'statusDisp', 
       valueField:'statusVal', 
       typeAhead: true, 
       editable: false, 
       mode: 'local', 
       forceSelection: true, 
       triggerAction: 'all', 
       selectOnFocus:false 
      } 
     ] 
    }); 

muss ich die Taste, um das erste Kombinationsfeld benachbart kommen, so dass sowohl die erste Combo und der Knopf sein sollte gleich Linie. Könnte jemand bitte mir dabei helfen?

Vielen Dank im Voraus ...

Answer 1

try Verbund Feld

{ 
    xtype: 'compositefield', 
    labelWidth: 120 
    items: [ 
     { 
      xtype  : 'textfield', 
      fieldLabel: 'Title', 
      width  : 20 
     }, 
     { 
      xtype  : 'textfield', 
      fieldLabel: 'First', 
      flex  : 1 
     }, 
     { 
      xtype  : 'textfield', 
      fieldLabel: 'Last', 
      flex  : 1 
     } 
    ] 
} 

oder verwenden hbox oder column Layout.

Answer 2

Da in ExtJS 4 'compositefield' nicht mehr verfügbar ist, können Sie stattdessen 'fieldcontainer' verwenden.

var config = { 
    xtype:'fieldcontainer', 
    layout:'hbox', 
    fieldLabel: 'Combobox', 
    items:[{ 
     xtype: 'combo', 
     flex:1 
     //rest of combo config, 
    },{ 
     xtype:'button', 
     text: 'Add New', 
     handler: function(){ 
      //add new record 
     } 
    }] 
};