Question

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

        }
    ]
}
})

谢谢大家

Answer 1

没有测试，但它应该工作。只需添加一个监听器进行更改，然后在处理程序中选择正确的选项卡。

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

            }
        ]
    }
    })

如何设置卡布局容器？

1 个答案: