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