Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
    GaryW is on a distinguished road

      0  

    Default [FIXED] List on hidden panel is visible

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

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
    GaryW is on a distinguished road

      0  

    Default


    That fixed it. Thanks.

  4. #4
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
    GaryW is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,991
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Please post your updated code.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
    GaryW is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Jun 2010
    Location
    Ponder, TX
    Posts
    9
    Vote Rating
    0
    GaryW is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Quote Originally Posted by GaryW View Post
    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.

Similar Threads

  1. a problem when a container shift between hidden and visible
    By marsxu in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2011, 6:57 AM
  2. [FIXED-773][3.2.0-6355] CompositeField on hidden panel
    By squ3lch in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 23 Mar 2010, 11:21 AM
  3. Replies: 4
    Last Post: 11 Jun 2009, 3:25 AM
  4. Hidden Panel gets streched after making it visible on IE
    By vikky_25 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Feb 2009, 12:56 AM

Thread Participants: 3