How to set card a layout container? - sencha-touch

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>'
}
]
}
]
}
})