Добавление выпадающий к панели по нажатию кнопки - Ext JS

Question

Так у меня есть панель здесь с несколькими компонентами:

{ xtype: 'panel', padding: 5, height: 500, width: '35%', 
        //Query Builder 
        items: [ 
         { xtype: 'combobox', padding: 5, fieldLabel: 'Search In', store: states, displayField: 'field1' }, 
         { xtype: 'button', text: 'Add', itemId: 'add_criteria' }, 
         { xtype: 'combobox', padding: 5, region: 'east', fieldLabel: 'Criteria 2', itemId: 'combo2', hidden: true }, 
... 

У меня есть контроллер установить, что прослушивает кнопку Add, чтобы быть нажата. Что я хочу сделать, это добавить в combobox (и, возможно, также текстовое поле?) Каждый раз, когда пользователь нажимает кнопку. Комбобокс будет добавлен к панели вниз вертикально.

Любые идеи?

Answer 1

EDIT: Я обновил его для ExtJS 4.2.

Я сделал вам рабочий пример. http://jsfiddle.net/cmvQt/

HTML:

<div id="panel"></div> 

ExtJS:

Ext.require([ 
    'Ext.panel.*', 
    'Ext.form.field.*' 
]); 

Ext.onReady(function(){ 

    function addComboBox(){ 
     panel.add({xtype: 'combobox'}); 
    } 

panel = Ext.create('Ext.panel.Panel',{ 
    xtype: 'panel', 
    renderTo: 'panel', 
    padding: 5, 
    height: 500, 
    width: '35%', 
    items: [{ 
      xtype: 'button', 
      text: 'Add', 
      handler: addComboBox 
      }] 
    }); 
});