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

flvtvl50  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(172)

我在一个前端UI上工作,将提供一个下拉菜单,其中将包含命令列表和一个或两个变量(取决于命令),我试图做的是,当我从下拉菜单中选择命令时,它应该填充用户将提供值的文本字段。例如,命令:“show route table<vrf_name><ip_addr>“,则应创建两个新文本字段,以便用户填写这些值。我对如何创建带有变量名的文本字段感到困惑。

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

8i9zcol2

8i9zcol21#

要动态添加字段,请尝试以下代码。它添加一个初始为空的字段集,当用户从组合框中选择某个内容时,它会在删除所有先前添加的文本字段后,将文本字段添加到字段集。(您可以使用container等来代替字段集。)
这是一把能用的小提琴。

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

gmxoilav2#

最好使用具有预定义表单的卡片布局,并使用组合框切换它们。类似于:

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

相关问题