Sencha touch 如何设置卡片布局容器？

请帮忙！我是新来sencha touch的，我有个问题。问题在于SettingsHirdField中，当我更改SettingsSecondField项值中的selectfield时，SettingsHirdField项也必须更改ActiveItem。例如，当我选择德语时，则在SettingsHirdField项中必须将第二项设置为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>'
                }
            ]

        }
    ]
}
})

Ext.define（'MS.view.settings.Main'{
扩展：“Ext.Panel”，
别名：“widget.settings”，
配置：{
布局：“vbox”，
项目：[
{
xtype:'容器'，
id:“SettingsFirstField”，
html:“第一项”
},
{
xtype:“字段集”，
id:“SettingsSecondField”，
项目：[
{
xtype:'selectfield'，
标签：“语言”，
标签宽度：“35%”，
选项：[
{文本：'法语'，值：'第一'}，
{文本：'German'，值：'second'}，
{文本：'English'，值：'third'}
]
}
]
},
{
xtype:'容器'，
id:“设置HirdField”，
布局：“卡片”，
项目：[
{
xtype:'容器'，
html:“选定法语”
},
{
xtype:'容器'，
html:“选定德语”
},
{
xtype:'容器'，
html:“选定的英语语言”
}
]
}
]
}
})

---

谢谢大家

我没有测试，但它应该可以工作。 只需为更改添加一个侦听器，并在处理程序中选择正确的选项卡

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

            }
        ]
    }
    })

Ext.define（'MS.view.settings.Main'{
扩展：“Ext.Panel”，
别名：“widget.settings”，
配置：{
布局：“vbox”，
项目：[
{
xtype:'容器'，
id:“SettingsFirstField”，
html:“第一项”
},
{
xtype:“字段集”，
id:“SettingsSecondField”，
项目：[
{
xtype:'selectfield'，
标签：“语言”，
标签宽度：“35%”，
选项：[
{文本：'法语'，值：'第一'}，
{文本：'German'，值：'second'}，
{文本：'English'，值：'third'}
],
听众：{
更改：函数（选择、新值、旧值）{
如果（newValue.data.value==='French'）{
Ext.ComponentQuery.query（'#setingsthirdfield'）[0]。setCard（'frCard'）；
}
}
}
}
]
},
{
xtype:'面板'，
id:“设置HirdField”，
布局：“卡片”，
项目：[
{
xtype:'容器'，
id:“frCard”，
html:“选定法语”
},
{
xtype:'容器'，
id:'deCard'，
html:“选定德语”
},
{
xtype:'容器'，
id:'enCard'，
html:“选定的英语语言”
}
]
}
]
}
})