[FIXED] List on hidden panel is visible

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'
                        });
                    }                 
                    }]
                }]
            }]
           
        });
       
       

       
    }
});

---

There were many things going on which made it hard to see what the issue was. I cleaned up the code a little bit (also removed some of the functionality, you will have to put it back I'm sorry...)

The following code works for me.

Code:

---

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

        var card1 = new Ext.Panel({
            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: function(){}
                }]
            }]
        });
       
        var list = new Ext.List({
            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'}
                ]
            }),
           
            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'
                        });
                    }
                }]
            }]
        });
       
        var panel = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            items: [card1, list]
        });
    }
});

---

I think reason the list showed up right away was because you apply fullscreen true to it.

Code:

---

items: new Ext.List(Ext.apply(groupingBase, {
    fullscreen: true,
    multiSelect: true,
    hideOnMaskTap: false               
}))

---

Whenever you add fullscreen: true to something, it will instantly be rendered. Normally you want to have only one panel that is fullscreen that contains everything else.

That fixed it. Thanks.

That fixed the fact that it was rendered at the wrong time, but now the list isn't scrollable. It seems like the list has to be fullscreen to make it usable. How do I get around that?

Please post your updated code.

Nevermind. I used your code instead of mine and all is well. Thanks for taking the time.

Using your code above, if you are on the List panel and you change to another panel, the List gets cleared of all the selected rows. Is there an easy way to keep those selected rows when moving from panel to panel?

Quote:

---

Originally Posted by GaryW

Using your code above, if you are on the List panel and you change to another panel, the List gets cleared of all the selected rows. Is there an easy way to keep those selected rows when moving from panel to panel?

---

Not that we currently have cooked into the framework.