View Full Version : List rows do not render until touched if server response is slow

23 Jun 2011, 9:11 PM
Hi all,

I've been going crazy trying to figure out why this is happening. The problem I am having is that when I load my app which has a Panel with a List whose store is a model loaded through a RestProxy, the list appears to be empty. It isn't until you touch one of the rows that it becomes visible. You have to touch each of the rows for them to be displayed (switching to another tab works too). I have narrowed it down to apparently having something to do with how fast the server sends the JSON data over. When the server responds fast, this problem does not occur (I am guessing the list 'draw' happens after the data has been downloaded).

If I add a lag to the server (3 seconds) before the JSON is sent, then the problem happens. I also noticed that if I remove the layout: {type: 'card' }, it also renders correctly. I can't do this in my actual application though, because this is actually part of a TabControl

Can anyone point me to what I'm doing wrong? By the way, this only happens when viewed on an iPhone. When opened in Chrome, everything is fine.

var proxy = new Ext.data.RestProxy({
format: 'json',
url: '/tabs/1/members',
reader: {
type: 'json',
root: 'data'

Ext.regModel( 'User', {
fields: [ 'name' ],
proxy: proxy
} );

var store = Ext.regStore( 'myStore', {
model: 'User',
autoLoad: true
} );

MyList = Ext.extend( Ext.Panel, {
fullscreen: true,
layout: {type: 'card' }, // Commenting this line also 'fixes' the problem
initComponent: function() {

this.list = new Ext.List({
itemTpl: '<div>{name}</div>',
store: 'myStore',
scroll: false,
autoHeight: true

this.items = this.list;

MyList.superclass.initComponent.call( this );

} );

Ext.reg( 'mylist', MyList );

onReady: function() {
new MyList();