PDA

View Full Version : Tab bar becomes invisible when address bar comes down on Android 2.2



sparkwired_com
16 Jun 2011, 3:51 AM
Hi,

I have a TabPanel which is fullscreen and contains a FormPanel and a panel containing a Map. Initial rendering is ok, only when I try to enter values in the form fields the browser address bar becomes visible (i don't know why, it doesn't auto-hide when the keyboard is dismissed).

This would not be so much of a problem (though unwanted in fullscreen=true mode), but the problem is that when the address bar shows, the tab bar is pushed off the bottom of the screen. The user can no longer access the other tabs. Scrolling the FormPanel does not bring the tab bar back up. I have included a code sample that, when executed in my htc desire, produces the problem. On IPad it seems not to be a problem since the browser bar is never hidden on that device.

I would like the tab bar to be fixed at the bottom of the screen and visible at all times. I tried to set overlay: true but that does not fix the problem.

Any ideas? This seems like a common layout so I must be missing something.



Sample = new Ext.Application({

launch: function() {

Sample.loginFormPanel = new Ext.form.FormPanel({
id: 'userform',
scroll: 'vertical',
url : 'postUser.php',
standardSubmit : false,
title: 'User',
iconCls: 'user',
items: [
{
xtype: 'fieldset',
title: 'Log in',
instructions: 'Enter your email and password to log in.',
defaults: {
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
required: true,
placeHolder: '[email protected]',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
required: true,
placeHolder: '',
useClearIcon: true,
autoCapitalize : false
}]
},
{
xtype: 'fieldset',
title: 'New user? Register here.',
instructions: 'Complete this form to create an account. Enter your chosen password twice for verification.',
defaults: {
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'emailfield',
name : 'register_email',
label: 'Email',
required: true,
placeHolder: '[email protected]',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'register_password',
label: 'Password',
required: true,
placeHolder: '',
useClearIcon: true,
autoCapitalize : false
},
{
xtype: 'passwordfield',
name : 'register_password2',
label: 'Password',
required: true,
placeHolder: '',
useClearIcon: true,
autoCapitalize : false
}
]
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
defaults: {
iconMask: true,
ui: 'plain'
},
title: 'Log in'
},
{
xtype: 'toolbar',
dock: 'top',
defaults: {
iconMask: true,
ui: 'plain'
},
items: [{
xtype: 'spacer'
}, {
text: 'Register',
ui: 'action',
handler: function() {
var form = Ext.getCmp('userform');
form.submit();
}
}, {
text: 'Login',
ui: 'confirm',
handler: function() {
var form = Ext.getCmp('userform');
form.submit({
waitMsg: {
message:'Submitting',
cls : 'demos-loading'
},
success: function(e) {
showCenteredOverlay();
form.reset();
}
});
}
}]
}
]
});

Sample.MapViewport = new Ext.Panel ({
title: 'Map',
iconCls: 'maps',
layout: 'fit',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
defaults: {
iconMask: true,
ui: 'plain'
},
title: 'Current location',
}],
items: [
new Ext.Map({
layout: 'fit',
items: [{xtype: 'map', useCurrentLocation: true}]})]
});

Sample.Viewport = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'light',
overlay: true,
style: 'opacity: 1;',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'fade',
cover: true
},
items: [
Sample.loginFormPanel,
Sample.MapViewport
]
});

}
});

siebmanb
21 Dec 2011, 8:55 AM
Up !

Good question. Same happens when using the return button, the url bar appears and hide the tabs.

siebmanb
21 Dec 2011, 8:57 AM
Similar conversation here : http://www.sencha.com/forum/showthread.php?117851-Hiding-address-bar-on-Android