This is a 3 panel layout with a List added to the second panel. The problem is that the list is visible in the first panel even though it should be hidden until the second panel is displayed. It's fine after you've switched to the second panel. It seems like the list isn't being hidden as it should when the panels are created. Am I adding the list wrong or is this a bug?


Code:
Ext.setup({
    onReady: function() {
        
        var overlayTb = new Ext.Toolbar({
            dock: 'top'
        });
        
        var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.platform.isPhone ? 260 : 400,
            height: Ext.platform.isPhone ? 220 : 400,
            styleHtmlContent: true,
            dockedItems: overlayTb,
            scroll: 'vertical',
            contentEl: 'lipsum',
            cls: 'htmlcontent'
        });
        
        var showCenteredOverlay = function(btn, event) {
            overlay.setCentered(true);
            overlayTb.setTitle('About Flight Fee Explorer');
            overlay.show();
        };        
        
        Ext.regModel('Airlines', {
            fields: ['airline']
        });
        
        var groupingBase = {
            tpl: '<tpl for="."><div class="airlines">{airline}</div></tpl>',
            itemSelector: 'div.airlines',
            
            singleSelect: true,
            grouped: true,
            indexBar: true,
            
            store: new Ext.data.Store({
                model: 'Airlines',
                sorters: 'airline',
                
                getGroupString : function(record) {
                    return record.get('airline')[0];
                },
                
                data: [
                    {airline: 'First'},
                    {airline: 'Second'},
                    {airline: 'Third'},
                    {airline: 'First'},
                    {airline: 'Second'},
                    {airline: 'Third'}                    
                ]
            })
        };
        
        var panel = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            items: [{
                html: "<h1>Welcome!</h1><div style=\"display: none;\"><div id=\"lipsum\"><p>Lipsum</p></div></div>",
                items: [{
                xtype: 'button',
                text: 'Option 1',
                handler: function() {
                        panel.layout.next({
                            type: 'slide',
                            direction: 'left'
                        });
                }                
            }, {
                xtype: 'button',
                text: 'Option 2',
                handler: function() {
                        panel.layout.next({
                            type: 'slide',
                            direction: 'left'
                        });
                }
            }],
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    text: 'About',
                    handler: showCenteredOverlay                    
                }]
            }]
            }, {
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [{
                        text: 'Back',
                        ui: 'back',
                        handler: function() {
                            panel.layout.prev({
                                type: 'slide',
                                direction: 'right'
                            });
                    }                    
                    },{xtype: 'spacer'},
                    {
                        text: 'Next',
                        ui: 'forward',
                        handler: function() {
                            panel.layout.next({
                                type: 'slide',
                                direction: 'left'
                            });
                    }               
                    }]
                }],
                items: new Ext.List(Ext.apply(groupingBase, {
                    fullscreen: true,
                    multiSelect: true,
                    hideOnMaskTap: false                
                }))
            }, {
                html: 'Card 3',
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [{
                        text: 'Airlines',
                        ui: 'back',
                        handler: function() {
                        panel.layout.prev({
                            type: 'slide',
                            direction: 'right'
                        });
                    }                   
                    },{xtype: 'spacer'},
                    {
                        text: 'New',
                        ui: 'forward',
                        handler: function() {
                        panel.layout.first({
                            type: 'slide',
                            direction: 'left'
                        });
                    }                   
                    }]
                }]
            }]
            
        });
        
        

        
    }
});