Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    1
    Michael0 is on a distinguished road

      1  

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

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


    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.)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I get a testcase, a simple list with a ListItem works for me without any resize or orientation change.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    1
    Smiggel is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    27
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    1
    Michael0 is on a distinguished road

      0  

    Default


    @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).

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    1
    Michael0 is on a distinguished road

      0  

    Default


    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.

    Code:
    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'); },
               }
            });
       }
    });

  7. #7
    Sencha User
    Join Date
    Dec 2012
    Posts
    12
    Vote Rating
    0
    anavio is on a distinguished road

      0  

    Default


    Same problem.

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

  8. #8
    Sencha User
    Join Date
    Dec 2012
    Posts
    12
    Vote Rating
    0
    anavio is on a distinguished road

      0  

    Default


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