List rows do not render until touched if store AJAX response is slow

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.e开发者_开发问答xtend( 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 );

Ext.setup({
  onReady: function() {
    new MyList();
  }
});

I do know a solution, but I don't know wether it's a good practice. In your initComponent method you could manually load the store (eg. store.load()) or attach a method on the store-load-event. The store.load() method accepts a callback method, which get executed after the store is loaded. In this callback you should bind the store to the list and render it.

I have no idea why, but it seems to be working now even though I didn't change anything that I recall. At first I thought I had fixed it by maxing the list 'ui: "round"' but when I was about to test this theory I ran the code I posted in the question and everything seemed to work, so I went back to my original code, restored the ui: round, and everything still works.

Might try to do a diff later to see if I can pinpoint the culprit but that might not happen for a while. Sorry.