Destroy component and create new each time the user clicks on a button

[kevincote]

Hi,
I have a form which works like this:

1) User select a value in a comboBox.
2) User clicks on a button, and depending of the value selected in the comboBox, a new comboBox is created with values associated.
3) User can select a second value.

My code actually works, but only for a single time:

items: [
            {
            xtype: 'combo',
            fieldLabel: 'Choose layer:',
            id: "lay1",
            store: store,
            queryMode: 'local',
            emptyText: 'Select point layer...',
            valueField      : 'name',
            displayField    : 'value',
            enableKeyEvents : false,
            submitEmptyText : false,
        }, {
            xtype: 'button',
            text: "Get keys...",
             listeners: {
/*                 single: true, */
                click: function(){
                    if(typeof keysForm === 'undefined'){
                            keysForm = new Ext.create('Ext.form.ComboBox', {
                            fieldLabel: 'Choose key to render',
                            id: 'comboKey',
                            store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                            queryMode: 'local',
                        });
                        getLayerAndKeys.add(keysForm);
                    } else {
                        Ext.getCmp('comboKey').destroy();
                            var keysForm2 = new Ext.create('Ext.form.ComboBox', {
                                fieldLabel: 'Choose key to render',
                                id: 'comboKey2',
                                store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                queryMode: 'local',
                            });
                            getLayerAndKeys.add(keysForm2);
                        }
                    
                }    
            }
        }]

How can I get the same results but for everytime the user clicks on the "Get keys" button ?

Thanks

[kevincote]

Ok solved it.

click: function(){
                    if(typeof Ext.getCmp('comboKey') === 'undefined'){
                            keysForm = new Ext.create('Ext.form.ComboBox', {
                            fieldLabel: 'Choose key to render',
                            id: 'comboKey',
                            store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                            queryMode: 'local',
                        });
                        getLayerAndKeys.add(keysForm);
                    } else {
                        Ext.getCmp('comboKey').destroy();
                            var keysForm = new Ext.create('Ext.form.ComboBox', {
                                fieldLabel: 'Choose key to render',
                                id: 'comboKey',
                                store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                queryMode: 'local',
                            });
                            getLayerAndKeys.add(keysForm);
                        }
                    
                }