1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    1
    ggproject is on a distinguished road

      1  

    Default Unanswered: Form with dynamically shown/hidden fields on combo selection

    Unanswered: Form with dynamically shown/hidden fields on combo selection


    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 ?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could do something like this:

    Code:
    // 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.

Thread Participants: 1

Tags for this Thread