Create one or more textfield dynamically based on combobox selection - extjs

Question

I am working on a front UI, a dropdown will be provided which will have the list of commands and one or two variables depending of command, what I am trying to do is when I select the command from dropdown, it should populate textfield where the user will provide the values.
e,g Command : "show route table <vrf_name> <ip_addr>"
then two new textfields should be created for user to fill in these values. I am stumped on how to create textfields with variable names. ?
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(),
});
Fiddle : https://fiddle.sencha.com/fiddle/3f2t

Answer 1

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

Answer 2

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