Create one or more textfield dynamically based on combobox selection

For dynamically adding fields, try the following code. It adds an initially empty fieldset, and when user selects something from the combobox, it adds textfields to the fieldset, after deleting all previously added textfields. (Instead of fieldset you can use container etc.)

This is a working fiddle.

var commands = Ext.create('Ext.data.Store', {
    fields: ['command', 'reqvalues'],
    data : [
        {"command":"op find-security-zone ip <ip_addr>", "reqvalues":"ip_addr"},
        {"command":"show configuration | display set | match <match_text>", "reqvalues":"match_text"},
        {"command":"show route table <vrf_name> <ip_addr>", "reqvalues":"vrf_name, ip_addr"}
    ]
});


Ext.create('Ext.panel.Panel', {
     renderTo: Ext.getBody(),
     items: [{
        xtype: 'combobox',
        fieldLabel: 'Select Command',
        store: commands,
        queryMode: 'local',
        displayField: 'command',
        valueField: 'command',
        listeners: {
            // this is needed to remove all textfields when nothing is selected
            change: function(combo, newValue, oldValue, eOpts) {
                if (!newValue) {
                    // remove all existing textfields from fieldset
                    combo.up('panel').getComponent('parameters').removeAll();
                }
            },
            select: function(combo, records, eOpts ) {
                // get fieldSet
                var fieldSet = combo.up('panel').getComponent('parameters');
                
                // remove previous textfields
                fieldSet.removeAll();
                
                // get parameters from selection, assuming only 1 can
                // be selected and delimiter in reqvalues is always ', '
                var parameters = records[0].get('reqvalues').split(', ');

                // loop through parameters and add textfield for each
                Ext.Array.each(parameters, function(parameter) {
                    fieldSet.add({
                        xtype: 'textfield',
                        fieldLabel: parameter,
                        // by setting itemId, you can easily get textfield values,
                        // for example:
                        // fieldSet.getComponent('parameter_name')
                        itemId: parameter
                    })
                });
            }
        }
    }, {
        // fieldSet for parameters, initially empty, can be container etc.
        xtype: 'fieldset',
        title: 'Parameters',
        itemId: 'parameters'
    }]
});

Better to use card layout with pre-defined forms and switch them using combobox. Something like this:

Ext.define('CommandsStore', {
    extend: 'Ext.data.Store',
    fields: ['command', 'cardIndex'],
    data: [{
        command: "op find-security-zone ip <ip_addr>",
        cardIndex: 0
    }, {
        command: "show configuration | display set | match <match_text>",
        cardIndex: 1
    }, {
        command: "show route table <vrf_name> <ip_addr>",
        cardIndex: 2
    }]
});

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            layout: 'card',
            title: "Commands",
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'Select Command',
                    store: Ext.create('CommandsStore'),
                    queryMode: 'local',
                    displayField: 'command',
                    valueField: 'cardIndex',
                    width: 400,
                    value: 0,
                    listeners: {
                        select: function (combo, records) {
                            var cardIndex = records[0].get('cardIndex');
                            this.up('panel').getLayout().setActiveItem(cardIndex);
                        }
                    }
                }]
            }],
            defaults: {
                xtype: 'form',
                layout: 'form',
                bodyPadding: 5,
                border: false,
            },
            items: [{
                items: [{
                    xtype: 'textfield',
                    fieldLabel: "IP Address",
                    name: 'ip_addr'
                }]
            }, {
                items: [{
                    xtype: 'textfield',
                    fieldLabel: "Match Text",
                    name: 'match_text'
                }]
            }, {
                items: [{
                    xtype: 'textfield',
                    fieldLabel: "IP Address",
                    name: 'ip_addr'
                }, {
                    xtype: 'textfield',
                    fieldLabel: "VRF Name",
                    name: 'vrf_name'
                }]
            }],
            height: 400,
            renderTo: Ext.getBody()
        })
    }
});