List component not rendering properly

[boniek]

Hello,
I've got problem with list component. Sometimes when it is rendered there is a large blank area.
About 400px / 400px starting in top left corner of the list component. (Similar thing is happening with dataview).
Does anyone know what may cause it ?
I have noticed it in Chrome 20 (Win7) and Safari (iOS 4.3).

My code:


Ext.define("Demo.view.SelectUser", {
extend: 'Ext.Container',
id: 'SelectUserForm',
config: {
fullscreen: true,
layout: 'fit',
items: [{
title: 'User Selection',
xtype: 'titlebar',
docked: 'top',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
id: 'backFromUserSelection'
}]
},
{
xtype: 'panel',
docked: 'bottom',
height: 50,
cls: 'hintLabel',
html: 'Please tap on user'
},
{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'list',
width: 500,
flex: 1,
id: 'UsersList',
ui: 'round',
itemTpl: '<table width=100% height=50><tr><td><strong>{LastName}, {FirstName}</strong></td></tr></table>',
}]
}
]
}
});


Thanks!

[mitchellsimoens]

Did you inspect the DOM to see what's going on?

[boniek]

If truth be told I didn't and I do not know how to do that.

But I have noticed that similar thing is happening in kitchen sink using my iPad 1 (iOS 4.3). When you goes to the UI -> List, it seems to me that list is rendering by parts from the bottom. Similar thing is happening with my app, but sometimes the top part of list isn't shown. However when it happens and I leave IPad be, after half a minute the missing part of the list will be shown. And then it will once again disappear and so on and so on.