PDA

View Full Version : Form with dynamically shown/hidden fields on combo selection



ggproject
18 Jun 2012, 2:59 PM
I'd like to create a form with select combo, and depending on the currently selected option different subfields would be shown/hidden.
Right now I have a combo and a set of two date fields that are hidden on render. When a combo value is changed I have an event listener that will display those fields. But I'm not sure if it's the best method to tackle this. Would a fieldset work better in this case ?

scottmartin
23 Jun 2012, 1:50 PM
You could do something like this:



// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'combobox',
fieldLabel: 'Choose State',
itemId: 'combofield',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
select: function(combo,records) {
var form = combo.up('form');
form.down('#container').setVisible(true);
}
}
},
{
xtype: 'fieldcontainer',
itemId: 'container',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
},
{
xtype: 'datefield',
fieldLabel: 'Date',
}
],
hidden: true
}
]
});‚Äč


Scott.