PDA

View Full Version : iPhone: TabPanel is shifted wrongly when showing virtual keyboard



Philippe Quemener
10 Aug 2011, 3:59 AM
Sencha Touch version tested:

1.1.0



only default ext-all.css

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:


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

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.

Screenshot

27408[]attach

PS: 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.

Philippe Quemener
17 Aug 2011, 12:04 AM
bump

Philippe Quemener
30 Aug 2011, 10:40 PM
If there is anything unclear or if more information is needed, please let me know.

Philippe Quemener
6 Oct 2011, 11:51 PM
bump

Philippe Quemener
13 Oct 2011, 4:26 AM
I found the solution myself. The Problem was some quite funny constructs I used due to my little experience with sencha touch. Solution is the following: The onReady function should begin like this:


panel = new Ext.Panel(
{
fullscreen: true,
id: MAIN,
layout: 'card',
cardSwitchAnimation:
{
type: 'slide',
cover: true
},
defaults:
{
scroll: 'vertical'
},
dockedItems:
...

I deleted the unnecessary Tabbar, the panel should be a Ext.Panel, not a TabPanel and gets a card-layout.

Although I found the solution, I still think that this is a bug in sencha touch. But anyway. I can continue programming.