Question

单击正确的选项卡时，我在主视图上显示设置视图时遇到问题。以下是主视图的代码：

Ext.define('App.view.Main', {
extend:'Ext.tab.Panel',
requires: [
    'App.view.SettingsView'
],
config: {
    fullscreen: true,
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'About',
            iconCls: 'info',                
            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Home Screen'
            },
            html: 'Home Screen'
        },
        {
            title: 'Maps',
            iconCls: 'maps',
            items:
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Maps Screen'
                },
                html: 'Maps Screen'         
        },
        {
            title: 'Setiings',
            iconCls: 'settings',
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Settings'
                },
                {
                    xtype: 'settingsview',
                    id: 'settingsview'
                }
            ]
        }
    ]
}
});

这是设置视图的代码：

Ext.define('App.view.SettingsView', {
extend: 'Ext.form.Panel',
xtype: 'settingsview',

requires: [
    'Ext.form.FieldSet',
    'Ext.field.Toggle',
    'Ext.field.Select',
    'Ext.field.Text',
    'Ext.Button'
],

config: {

    xtype: 'fieldset',
    title: 'SettingsView',
    instructions: 'In case you do not want the app to detect your location you can enter the city and country.',

    items: [
        {
            name: 'geo',
            xtype: 'togglefield',
            label: 'Auto detect?',
            labelWidth: '55%',
            value: '1',
        },
        {
            name: 'units',
            xtype: 'selectfield',
            label: 'Units',

            options: [
                {
                    text: 'Fahrenheit',
                    value: 'f'
                },
                {
                    text: 'Celsius',
                    value: 'c' 

                }
            ]

        },
        {
            name: 'city',
            xtype: 'textfield',
            label: 'City',
            disabled: true
        },
        {
            name: 'country',
            xtype: 'textfield',
            label: 'Country',
            disabled: true
        },
        {
            xtype: 'button',
            text: 'Refresh',
            action: 'refresh',
            margin: '10 5',
            ui: 'confirm'
        }
    ]        
}
});

启用“设置”选项卡后，它仅显示标题栏和标签栏。没有错误消息。我究竟做错了什么？

Answer 1

尝试在设置视图中的配置中添加layout:'fit'

OR

修改主视图

        {
            title: 'Setiings',
            iconCls: 'settings',
            layout: 'vbox',
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Settings'
                },
                {
                    xtype: 'settingsview',
                    id: 'settingsview',
                    flex: 1
                }
            ]
        }

Sencha Touch - 选项卡面板上未显示的另一个视图

1 个答案: