Form with dynamically shown/hidden fields on combo selection

[ggproject]

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]

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.