button - 单击按钮将组合框添加到面板-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 },
...

我设置了一个控制器来侦听要单击的“添加”按钮。我想要做的是每次用户单击按钮时添加一个组合框（也许还有一个文本字段？）。组合框将被添加到垂直向下的面板中。

有任何想法吗？

Answer 1

编辑：我为 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
           }]
    });
});