根据组合框选择动态创建一个或多个文本字段

Question

我正在处理前端用户界面，将提供一个下拉列表，其中将包含命令列表和一个或两个变量，具体取决于命令，我想要做的是当我从下拉列表中选择命令时，它应该填充用户将提供值的文本字段。 例如，命令：“显示路由表 ” 然后应该为用户创建两个新的文本字段来填写这些值。我对如何使用变量名创建文本字段感到困惑。 ?

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"}
    ]
});

// Create the combo box, attached to the data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Select Command',
    store: commands,
    queryMode: 'local',
    displayField: 'command',
    valueField: 'command',
    renderTo: Ext.getBody(),
});

小提琴：https://fiddle.sencha.com/fiddle/3f2t

Answer 1

对于动态添加字段，请尝试以下代码。它添加了一个最初为空的字段集，当用户从组合框中选择某些内容时，它会在删除所有先前添加的文本字段后将文本字段添加到字段集中。 （您可以使用容器等代替字段集）

这是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'
    }]
});

Answer 2

最好使用带有预定义表单的卡片布局并使用组合框切换它们。像这样的：

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()
        })
    }
});