Sencha Touch 2.2: list items render on top of each other in android phonegap app

Question

I'm experiencing this weird issue where on every third launch or so of my sencha touch 2.2 android phonegap app all my list items render on top of each other. As soon as you drag the list a bit it sorts itself out.

Tried a bunch of things: changing all configs on my list, removing all my custom css, adding a scroll function that scrolls down and then up again after the list has finished rendering, but to no avail.

Any ideas?

Update: Better description of the setup.

The list is inside of a navigationview which, in turn, is inside a slidenavigationview (github.com/wnielson/sencha-SlideNavigation).

The store is set on initialization of the list view.

List definition (a little bit simplified):

Ext.define('Labblistan.view.LabList', {
extend: 'Ext.dataview.List',
xtype: 'lablist',
requires: [
    'Labblistan.controller.SearchController',
    'Ext.util.DelayedTask',
    'Ext.plugin.PullRefresh',
    'Ext.SegmentedButton'],

id: 'lablist',
config: {
    grouped: true,
    infinite: true,
    useSimpleItems: true,
    variableHeights: true,
    plugins: [{
        xclass: 'Ext.plugin.PullRefresh',
        pullRefreshText: 'Dra ned för att uppdatera!',
        lastUpdatedText: 'Senast uppdaterad',
        loadingText: 'Förbereder uppdatering',
        releaseRefreshText: 'Släpp för att uppdatera!',
        refreshFn: function (plugin) {
            confirmUpdate();
        }
    }],
    itemTpl: itemtemplate, //long and kinda complicated so I didn't include it here
    onItemDisclosure: true,
    disableSelection: true,
    indexBar: {
        right: '-10px'
    },
    loadingText: 'Laddar',
    iconmask: true,
    scrollToTopOnRefresh: false,
    cls: 'listan',
    items: items, //Contains another toolbar with some buttons for improved sorting
    listeners: {
        initialize: function () {
            console.log('initialize list');
            var dynstore = Ext.getStore('LabListStore');
            this.setStore(dynstore);
        },
        painted: function () {
            console.log('painted list');
            setTimeout(function () {
                Ext.getCmp('listbar').enable();
            }, 600);
            Ext.Viewport.setMasked(false);
            return false;
        },
        hide: function () {
            console.log('hide list');
            return false;
        }
    }
}
});

enter image description here

Could you share some code? This happens in desktop browser too? — Scoup
Unfortunately can't test in desktop browser because of cordova code. Does not happen on iOS though. What code would be helpful? The list conf? Will add that now + extended description of the setup — Hessius
I already had some weird bugs with phonegap. If works fine in IOS I suggest first you try to use another version of phonegap (can be a older one, only to test). I cant see any problem in your sencha code, so can be phonegap or some plugins you are using. Only put your "id" inside your config, all configs now have to be inside the config object (outside config is deprecated). I had trouble with that too (created a very weird problem after sencha compiler). — Scoup
Thanks, as I'm on 2.6 now I'll start out by upgrading to 2.7 and see if it makes a difference. Oh, and moved id, thanks! — Hessius
Could you share the CSS linked to your list. Everything related to .listan — Titouan de Bailleul

Sergio Prado Sergio Prado · Accepted Answer · 2013-05-06T03:34:01

If you've upgraded your app to Sencha 2.2 (rather than generated a new one), something might have gotten mucked up in the upgrading of app.css (it was when I upgraded). Lists were revamped heavily in Sencha 2.2, so the CSS from pre-2.2 breaks the lists.

If you replace the unsuccessfully upgraded app.css with the app.css that's created from a new Sencha 2.2 app (sencha app generate), that should fix the problem, or at least it did for me. If that doesn't work, adding:

.x-list .x-list-item{
    position: relative !important;
}

should work.

Hope that's helpful!

Sencha Touch 2.2: list items render on top of each other in android phonegap app

1 Answers