How to set card a layout container?

Question

Please help! I'm new to sencha touch and i have a problem. Problem is in the SettingsThirdField, when i change selectfield in the SettingsSecondField item value then the SettingsThirdField item must also change ActiveItem. For Instance, when i select a German language then in the SettingsThirdField item must set a second item as ActiveItem.

Ext.define('MS.view.settings.Main', {
    extend: 'Ext.Panel',
    alias: 'widget.settings',

config: {       
    layout: 'vbox',     
    items: [
        {
            xtype: 'container',
            id: 'SettingsFirstField',               
            html: '<h1>First Item</h1>'
        },
        {
            xtype: 'fieldset',
            id: 'SettingsSecondField',
            items: [
                {
                    xtype: 'selectfield',
                    label: 'Language',
                    labelWidth: '35%',
                    options: [
                        {text: 'French',  value: 'first'},
                        {text: 'German', value: 'second'},
                        {text: 'English',  value: 'third'}
                    ]
                }
            ]
        },
        {
            xtype: 'container', 
            id: 'SettingsThirdField',               
            layout: 'card',
            items: [
                {
                    xtype: 'container',                     
                    html: '<h1>Selected French Language</h1>'
                },
                {
                    xtype: 'container',                     
                    html: '<h1>Selected German Language</h1>'
                },
                {
                    xtype: 'container',                     
                    html: '<h1>Selected English Language</h1>'
                }
            ]

        }
    ]
}
})

Thank you to everybody

Answer 1

Didnt test but it should work. Just add a listener for change and select the right tab in the handler.

   Ext.define('MS.view.settings.Main', {
        extend: 'Ext.Panel',
        alias: 'widget.settings',

    config: {       
        layout: 'vbox',     
        items: [
            {
                xtype: 'container',
                id: 'SettingsFirstField',               
                html: '<h1>First Item</h1>'
            },
            {
                xtype: 'fieldset',
                id: 'SettingsSecondField',
                items: [
                    {
                        xtype: 'selectfield',
                        label: 'Language',
                        labelWidth: '35%',
                        options: [
                            {text: 'French',  value: 'first'},
                            {text: 'German', value: 'second'},
                            {text: 'English',  value: 'third'}
                        ],
                        listeners: {
                        change: function (select, newValue, oldValue) {
                            if( newValue.data.value === 'French'){
                               Ext.ComponentQuery.query('#SettingsThirdField')[0].setCard('frCard');
                            }
                        }
                    }
                    }
                ]
            },
            {
                xtype: 'panel', 
                id: 'SettingsThirdField',               
                layout: 'card',
                items: [
                    {
                        xtype: 'container',
                        id:'frCard',                     
                        html: '<h1>Selected French Language</h1>'
                    },
                    {
                        xtype: 'container',
                        id:'deCard',              
                        html: '<h1>Selected German Language</h1>'
                    },
                    {
                        xtype: 'container',
                        id:'enCard',                      
                        html: '<h1>Selected English Language</h1>'
                    }
                ]

            }
        ]
    }
    })