[ST 2.1.0-b03] List stays empty when store loaded too early

[Michael0]

REQUIRED INFORMATION


Version tested:

• Sencha Touch 2.1 Beta 3

Browser versions tested against:

• Android 4.0.3
• Chrome 21

Description:

• It appears to me that the new list implementation in ST 2.1 relies on getting the resize event to build up a couple of list items where later the actual data is displayed. In my application I use a controller to create the list and then load the store behind the list. Now if the store loads fast enough it returns the data before the list has got the resize event and before it has any items created. When this happens the list does not display anything and stays unusable.
• For me, this happened only on Android (Galaxy II) when getting data over WiFi (fast). It did not happen when the data was transported via mobile networks (slow), and not in Chrome. I did not test on iOS.

Steps to reproduce the problem:

• Run a controller to Ext.create a list that has an associated store with autoload = false
• Immediately after adding the list to it's parent component, load the store.
• I think it's a timing issue - so reproducing might be hard.

The result that was expected:

• The list should display the loaded data

The result that occurs instead:

• The list stays empty

Test Case:

sorry I currently don't have a simple test case for repro



HELPFUL INFORMATION

I worked around this issue by making the list listening for it's own resize event. This event handler calls back to the controller so that the controller can then load the store. At the same time I set a flag in the controller that the list is now okay. Using this flag I prevent reloading the list every time a resize occurs, e.g. on orientation change. (While I'm typing this I get the idea of unregistering the resize event handler instead of using a flag.)

[mitchellsimoens]

Can I get a testcase, a simple list with a ListItem works for me without any resize or orientation change.

[Smiggel]

Do you use a listener on the data loader?

Seems to me that the loader is still loading while your list is already being build/displayed. You should build the list after the data is actually being loaded.

[Steffen Hiller]

When the list is empty and you try to scroll it, do you see a small scrolling bar on the top right?
I have a similar issue on iOS, haven't gotten the time yet to report it.

[Michael0]

@Smiggel: I first create the list, then add it to its parent container (a carousel), then start loading the data. I tried reversing the order: first load the data and when it has loaded, create the list and add it - with no apparent difference in the result.

@Mitchel: I still have no repro project, but I debugged some. It seems that in normal cases, the paint monitor fires the painted event which in turn causes the size monitor to fire the resize event, which in turn makes the list create the list items and makes the carousel set its active item marker. When things go wrong, the paint monitor simply seems to refuse working, the painted event is missing. But why?

@Steffen: Yes the scroll bar is reduced to a dot in the upper right corner when a list is affected. When a carousel if affected, it's active item markers alls stay in light color (where a dark color would indicate the active item).

[Michael0]

Okay, here's a simple test case - this is an example from the docs.
When I run it with sencha-touch-all-debug.js (2.1 beta 3) in Chrome 21, the lists's show event is triggered, but I don't get the painted event or the resize event. The screen stays blank.
I'm not totally sure that this is the original issue I reported.
I get the feeling that I am doing something wrong that's very basic - please help.

Ext.application({


   launch: function() {
       Ext.define('Contact', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['firstName', 'lastName']
            }
        });


        var store = Ext.create('Ext.data.Store', {
           model: 'Contact',
           sorters: 'lastName',


           grouper: {
               groupFn: function(record) {
                   return record.get('lastName')[0];
               }
           },


           data: [
               { firstName: 'Tommy',   lastName: 'Maintz'  },
               { firstName: 'Rob',     lastName: 'Dougan'  },
               { firstName: 'Ed',      lastName: 'Spencer' },
               { firstName: 'Jamie',   lastName: 'Avins'   },
               { firstName: 'Aaron',   lastName: 'Conran'  },
               { firstName: 'Dave',    lastName: 'Kaneda'  },
               { firstName: 'Jacky',   lastName: 'Nguyen'  },
               { firstName: 'Abraham', lastName: 'Elias'   },
               { firstName: 'Jay',     lastName: 'Robinson'},
               { firstName: 'Nigel',   lastName: 'White'   },
               { firstName: 'Don',     lastName: 'Griffin' },
               { firstName: 'Nico',    lastName: 'Ferrero' },
               { firstName: 'Jason',   lastName: 'Johnston'}
           ]
        });


        Ext.create('Ext.List', {
           fullscreen: true,
           itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
           store: store,
           grouped: true,
           listeners: {
               show: function(){ Ext.Msg.alert('show'); },
               painted: function(){ Ext.Msg.alert('painted'); },
               resize: function(){ Ext.Msg.alert('resize'); },
           }
        });
   }
});

[anavio]

Same problem.

If I add a breakpoint in API or I add a alert in "refresh" event of store, then works.

[anavio]

Looks the solution for me was deleting "@include sencha-loading-spinner;" line from default-theme.scss