Ext.List Only Rendering on Orientation Change

Ext.List and Ext.Panel Code Code

Ext.namespace('Envato.AudioJungle.Previewer');
var lastItemClicked = null; // Stores the last 'play' or 'pause' item clicked on
Envato.AudioJungle.Previewer.audioPreview = new Ext.Audio({}); // Blank audio player used to preview the items
Envato.AudioJungle.Previewer.popularItemList = new Ext.List({ // The list of popular items
    store: 'popularItemStore',
    emptyText: 'No popular items found',
    loadingText: 'Loading Items',
    itemTpl: new Ext.XTemplate( // How we format the items when they come back
        '<div class = "audio_jungle_item">',
            '<img src = "{thumbnail}" class = \"thumbnail\">',
            '<span class = "item_title">{[fm.ellipsis(values.item, 20, false)]}</span>',
            '<span class = "item_author"> by {user} ({sales} sales)</span>',
            '<div class = "x-button play_pause_button">Play</div>',
        '</div>'
    ),
    listeners: {
        itemtap: function(self, index, item, e) {
            var selectedItem = self.getRecord(item);
            var tapTarget = e.getTarget(); // Stores what we clicked on
            if(tapTarget.innerHTML == 'Play') { // We clicked on a 'Play button'
                if(lastItemClicked && lastItemClicked.innerHTML == 'Pause') { // Another item is currently playing
                    lastItemClicked.innerHTML = 'Play'; // Switch the button to 'Play'
                }
                lastItemClicked = tapTarget; // Store the currently clicked item as the last clicked item
                lastItemClicked.innerHTML = 'Pause'; // Set the button we clicked on to 'Pause'
                if(Envato.AudioJungle.Previewer.audioPreview.url) { // Check to see that the audio previewer is not empty
                    Envato.AudioJungle.Previewer.audioPreview.pause(); // Pause it
                }
                // Reset the audio previewer to play the item clicked
                Envato.AudioJungle.Previewer.audioPreview = new Ext.Audio({
                    id: 'audioPreview',
                    hidden: true,
                    url: selectedItem.get('preview_url'),
                    renderTo: Ext.getBody()
                });
                // Play the audio
                Envato.AudioJungle.Previewer.audioPreview.play();
            } else if (tapTarget.innerHTML == 'Pause') { // We clicked a pause button
                Envato.AudioJungle.Previewer.audioPreview.pause(); // Pause playback
                tapTarget.innerHTML = 'Play'; // Set the button to say 'Play'
            } else {
                Ext.Msg.confirm("Audio Jungle", "View this item at AudioJungle.com?", function(btn) {
                    if(btn == 'yes') {
                        location.href = selectedItem.get('url');
                    }
                });
            }
        }
    }
});
Envato.AudioJungle.Previewer.optionToolbar = {
    dock: 'top',
    xtype: 'toolbar',
    title: 'AudioJungle - Popular Items'
};
Envato.AudioJungle.Previewer.displayPanel = new Ext.Panel({
    layout: 'fit',
    fullscreen: true,
    dockedItems: Envato.AudioJungle.Previewer.optionToolbar,
    items: Envato.AudioJungle.Previewer.popularItemList
});

Store Code

var popularItemFields = [{
    name: 'preview_url',
    type: 'string'
},{
    name: 'sales',
    type: 'integer'
},{
    name: 'user',
    type: 'string'
},{
    name: 'cost',
    type: 'float'
},{
    name: 'url',
    type: 'string'
},{
    name: 'uploaded_on',
    type: 'date',
    dateFormat: 'r'
},{
    name: 'rating',
    type: 'integer'
},{
    name: 'tags',
    type: 'string'
},{
    name: 'thumbnail',
    type: 'string'
},{
    name: 'id',
    type: 'integer'
},{
    name: 'item',
    type: 'string'
},{
    name: 'preview_type',
    type: 'string'
},{
    name: 'length',
    type: 'string'
}];
Ext.regModel('PopularItem', {
    fields: popularItemFields
});
Envato.Stores.popularItemsStore = new Ext.data.JsonStore({
    sorters: 'item',
    model: 'PopularItem',
    storeId: 'popularItemStore',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'php/scripts/envato.php',
        extraParams: {
            site: 'audiojungle'
        },
        reader: {
            type: 'json',
            root: 'root',
            idProperty: 'id'
        }
    },
    getGroupString: function(record) {
        return record.get('item')[0];
    }
});

Main.js code

    Ext.namespace('Envato', 'Envato.AudioJungle', 'Envato.AudioJungle.Previewer', 'Envato.Stores');
    Ext.setup({
        onReady: function() {
            Envato.AudioJungle.Previewer.displayPanel.render(Ext.getBody()).doComponentLayout();
        }
    })

on mobile devices (iphone and ipad), the toolbar wi开发者_StackOverflow中文版ll render just fine but the list won't render until I change the device's orientation.

On chrome, it renders just fine. Does anyone see anything glaring that would cause this?

---

By declaring the panel as fullscreen: true, it will automatically render to the document body on creation (ie. before onReady).

Ext.setup({
    onReady: function(){
        Ext.regModel('Item', {
            fields: ['text']
        });

        new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            dockedItems: [{
                xtype: 'toolbar',
                items: {
                    text: 'I am a button'
                }
            }],
            items: {
                xtype: 'list',
                itemTpl: '{text}',
                store: new Ext.data.Store({
                    model: 'Item',
                    data: [{
                        text: 'Foo'
                    }]
                })
            }
        });
    }
});