View Full Version : textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

18 Aug 2011, 1:42 AM
Hi forum,

I have a strange but reproducible behavior with my Sencha Touch 1.1.0-code which I cannot fix myself.

I have a simple panel in fullscreen mode which contains a toolbar as dockedItem, a textfield and a list. When I scroll the list on my Google Nexus S (Android 2.3.4) and then focus the textfield, the textfield (partwise) disappears from the screen. When one then starts entering some characters into the field, the view "ditches" up and down.

I can reproduce this behaviour on the Nexus everytime, but fail to reproduce this on my Samsung Galaxy S (GT-I9000) and on iPad 2 and iPhone 4 (everything is working like a charm there).

Here is a minimal online example of the described behaviour:
If you load this example on the nexus and follow these steps, you should be able to reproduce the error:
Scroll the list of names in any vertical direction
Focus the textfield by tapping into the field
(the keyboard pops up)
The layout is distorted, the textfield isn't fully visible
When you now start to sth. in the field the ditching occurs and the situation is worse
This is the full code:


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="./sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="./sencha-touch-1.1.0/sencha-touch.js"></script>
<script type="text/javascript" src="example.js"></script>

example.js (http://www.webmapcenter.de/textfield-focus-scroll-bug/example.js)
// bogus datawindow.mockupData = [
{firstName: 'Ed 1'}, {firstName: 'Tommy 1'}, {firstName: 'Aaron 1'},
{firstName: 'Ed 2'}, {firstName: 'Tommy 2'}, {firstName: 'Aaron 2'},
{firstName: 'Ed 3'}, {firstName: 'Tommy 3'}, {firstName: 'Aaron 3'},
{firstName: 'Ed 4'}, {firstName: 'Tommy 4'}, {firstName: 'Aaron 4'},
{firstName: 'Ed 5'}, {firstName: 'Tommy 5'}, {firstName: 'Aaron 5'},
{firstName: 'Ed 6'}, {firstName: 'Tommy 6'}, {firstName: 'Aaron 6'},
{firstName: 'Ed 7'}, {firstName: 'Tommy 7'}, {firstName: 'Aaron 7'},
{firstName: 'Ed 8'}, {firstName: 'Tommy 8'}, {firstName: 'Aaron 8'},
{firstName: 'Ed 9'}, {firstName: 'Tommy 9'}, {firstName: 'Aaron 9'},
{firstName: 'Ed 10'}, {firstName: 'Tommy 10'}, {firstName: 'Aaron 10'
// simple model
'User', {
fields: [

onReady: function(){
var btn = new Ext.Button({
text: 'btn'
var toolbar = new Ext.Toolbar({
items: [
var textfield = new Ext.form.Text({
flex: 1,
name: 'my-textfield',
placeHolder: 'scroll list, then focus me'
var list = new Ext.List({
flex: 12,
itemTpl: new Ext.XTemplate('{firstName}'),
store: new Ext.data.Store({
model: 'User',
data: window.mockupData
var innerPanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
items: [
var outerPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
// This is the offending configuration. Some notes:
// 1) if I don't include dockedItems, the bug is gone
// 2) if the dockedItems belong to the innerPanel
// the bug is there as well
dockedItems: [toolbar],
items: [innerPanel]
// for easier access to the created elements
window.debug = {
btn: btn,
toolbar: toolbar,
textfield: textfield,
list: list,
innerPanel: innerPanel,
outerPanel: outerPanel

If I leave out the dockedItems, the error is gone. If I move the dockedItems from the outer to the inner panel, the bug still occurs.

It does not matter whether I instanciate the toolbar or use the xtype only.

I am out of guesses and gratefull for every hint / insight you can share.

Maybe I am missing something fundamentally or create the desired layout in too complicated way. Please tell me if this can be simplified.

Some images of the problem in the Nexus in case you do not own that particular device (sorry for the poor quality):

Initial layout, everything is ok:

After the list was scrolled and the field got focus:

After one typed somthing in the field:

Thanks in advance and best regards,

18 Aug 2011, 5:55 AM
Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).

I've noticed this problem happen to me quite often..

18 Aug 2011, 6:47 AM
Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).

Hi jjerome,
thanks for the feedback.

Yes, if I remove both

layout: {
type: 'vbox',
align: 'stretch'

and the flex-configurations, the displacement isn't happening and everything look neat at first sight, BUT the list of names isn't scrollable in a reasonable way: see http://www.webmapcenter.de/textfield-focus-scroll-bug/example2.html

(http://www.webmapcenter.de/textfield-focus-scroll-bug/example2.html)So sadly this doesn't seem to be an option for me. Or can I make the bottom list scrollable by a certain configuration?

Thanks in any case,

18 Aug 2011, 6:57 AM
add a 'fit' layout to the list. that should fix it :)

18 Aug 2011, 7:04 AM
Sorry, that didn't work, I updated the http://www.webmapcenter.de/textfield-focus-scroll-bug/example2.html example with layout: 'fit' but still the scrolling in the list is somewhat broken. More ideas of how to get back the original scrolling behaviour?

18 Aug 2011, 7:16 AM
try adding a 'fit layout to the innerPanel too. I didn't realize that didn't have a layout.

Why do you use an inner AND outer panel?
I understand the inner is the wrapper panel for the list, but why use an outer one?
Couldn't you just dock the toolbar in the innerPanel?

18 Aug 2011, 11:02 PM
Hi jjerome,

Thanks a lot. That was indeed the missing piece.

One oddity though: only adding layout: 'fit' did not do the trick I also had to swap the position of the textfield and the list in the innerPanel. The relevant code now reads:

var innerPanel = new Ext.Panel({
layout: 'fit',
items: [

Visually they appear with the textfield above the list in the Nexus, iPad 2 and iPhone 3GS though.

As far as I can tell you solved this issue, so thanks a lot!