Sencha Touch-選項卡面板上未顯示其他視圖

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

嘗試在settingsview中的配置中添加layout:'fit'

要么

修改您的主視圖

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