Dynamic form fields on combobox change in extjs 4
I have a combobox and now I want to create dynamic textboxes when this combobox changes in Extjs 4 and I am following the Mvc structure from Extjs. Mycombo below
{
xtype : 'combo',
store : 'product.CategoryComboBox',
name: 'category',
id:'category',
displayField: 'name',
valueField: 'idProductCategory',
multiSelect : false,
fieldLabel: 'Category',
allowBlank: false,
allowQueryAll : false,
forceSelection : true,
typeAhead: true,
triggerAction: 'all',
delimiter : ',',
width: 300,
queryMode:'local',
listeners:{select:{fn:function(combo, value) {}
}
+3
source to share
3 answers
You can add FieldSet like this to your form
{
xtype: 'fieldset',
itemId: 'field_container',
layout: 'anchor',
border: 0,
style: { padding: '0' },
fieldDefaults: {
// field defaults
},
defaultType: 'textfield'
}
so when the combo box changes its value you simply do the following
var container = this.down('fieldset[itemId="field_container"]');
container.removeAll();
var fieldsToAdd = [
{ name: 'field1', xtype: 'textfield', value: 'xxxxxx' },
{ name: 'field2', xtype: 'textfield', value: 'yyyyyyy' }
];
container.add(fieldsToAdd);
this way you can decide what the ToAdd fields contain based on the combobox value.
+3
source to share
The container field allows you to have multiple form fields on the same line, so you can do this:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: {
xtype: 'combo',
// your config here
listeners: {
change: function () {
this.up('fieldcontainer').add({
xtype: 'textfield',
value: this.getValue()
});
}
}
}
}
Edit
I think you will need to check if the textbox exists:
change: function () {
var ct = this.up('fieldcontainer'),
textField = ct.down('textfield');
if (textField) {
textField.setValue(this.getValue());
} else {
ct.add({
xtype: 'textfield',
value: this.getValue()
});
}
}
0
source to share