1 Attachment(s)
iPhone: TabPanel is shifted wrongly when showing virtual keyboard
Sencha Touch version tested:Platform tested against:- iOS 3.x
- iOS 4
- Android 2.3
Description:- I have a TabPanel with 7 items. If I tap a TextField, the virtual keyboard appears and the panel is shifted also to the left (cf. screenshot). This happens only with iPhones with the portrait orientation. If I reduce the number of items of the tabpanel to 6 or less, it works (doesn't matter which items, just the number). But 7 or more leads to this behaviour. No problem with Android 2.3 (Galaxy i9000) or with horizontal orientation.
Test Case:
Code:
var MAIN = "main";
var SETTINGS = "settings";
var panel = null;
Ext.setup({
onReady: function()
{
panel = new Ext.TabPanel(
{
id: MAIN,
fullscreen: true,
tabBar:
{
dock: 'bottom',
ui: 'light'
},
defaults:
{
scroll: 'vertical'
},
dockedItems:
[
{
xtype: 'toolbar',
dock: 'top',
title: 'Test',
id: 'titleBar'
}
],
items:
[
new LoginPanel(),
new SettingsPanel(),
new SettingsPanel(),
new SettingsPanel(),
new SettingsPanel(),
new SettingsPanel(),
new SettingsPanel()
]
});
}
});
LoginPanel = function()
{
LoginPanel.superclass.constructor.call(this);
};
Ext.extend(LoginPanel, Ext.form.FormPanel,
{
layout: 'vbox',
scroll: 'vertical',
id: "login",
initComponent: function()
{
this.items =
[
{
xtype: 'fieldset',
title: "Login",
items:
[
{
id: 'loginName',
xtype: 'textfield',
label: "User"
},
{
id: 'loginPassword',
xtype: 'passwordfield',
label: "Password"
}
]
}
];
LoginPanel.superclass.initComponent.call(this);
},
submit : function()
{
this.onLogin(null, null);
},
onLogin : function(relogin, response)
{
panel.setActiveItem(SETTINGS, 'slide');
}
});
Ext.reg('loginPanel', LoginPanel);
SettingsPanel = function()
{
SettingsPanel.superclass.constructor.call(this);
};
Ext.extend(SettingsPanel, Ext.Carousel,
{
id : SETTINGS,
scroll: 'vertical',
initComponent: function()
{
this.items =
[
new Ext.Panel({html: 'Test 1'}),
new Ext.Panel({html: 'Test 2'})
];
SettingsPanel.superclass.initComponent.call(this);
}
});
Code:
Ext.reg('settingsPanel', SettingsPanel);
Steps to reproduce the problem:- Copy the code above in a file called test.js and create a file called test.html with the following content:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CAESAR2Go</title>
<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
<!-- Sencha Touch JS -->
<script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>
<!-- Application JS -->
<script type="text/javascript" src="test.js"></script>
</head>
<body></body>
</html>
Cut the items of the tabpanel to 6 or less to see the problem disappear.
ScreenshotPS: I have no idea why I cannot correct the second code block to merge with the first one. But I think you will get the idea.
Thank you very much for reading.
