Sencha Touch - another view not showing on the tab panel

Question

I have an issue with showing a settings view on the main view when clicking a proper tab. Here is the code for the main view:

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

And this is the code for the settings view:

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

When the settings tab is enabled it shows only the title bar and the tab bar. No error messages. What am I doing wrong?

Answer 1

Try to add layout:'fit' in config inside settingsview

OR

Modify your main view

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