Results 1 to 5 of 5

Thread: Problems with hide() / show() in Firefox2, not Safari

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    57

    Default Problems with hide() / show() in Firefox2, not Safari

    My goal is to have a layout in a div with user info, such as chat, that can slide in and out over pages in the website.

    (OS X 10.4.8) With the complex layout example with the menu.js, Toggle hide() / show() works in Safari and not in Firefox2. In FF when toggled to hide, it is still visible. I can get it to hide by setting the layout.getEl().setDisplayed(false); http://www.yui-ext.com/forum/viewtopic.php?t=3378, which works but if I setDisplayed(false); it then resize my browser window, then setDisplayed(true); the auto size is all messed up, with the regions not displaying properly.

    Has anyone experienced these issues? Does anyone have a solution? Thanks in advance.

    Here are some different variations. If you play with the code, resize your FF2 window after you hide the div, then show the div to see the problem:

    complex.html(with toolbar.js)
    Code:
    <html>
    <head>
      <title>Complex Layout</title>
    	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
             <script type="text/javascript" src="../../yui-utilities.js"></script>     <script type="text/javascript" src="../../ext-yui-adapter.js"></script>     
        <script type="text/javascript" src="../../ext-all.js"></script>
        
        
        <script type="text/javascript" src="menus.js"></script>
        <link rel="stylesheet" type="text/css" href="menus.css" />
        
        <link rel="stylesheet" type="text/css" href="../examples.css" />
      
        
    	<style type="text/css">
    	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
    	.x-layout-panel-north {
    	    border:0px none;
    	}
    	#nav {
    	}
    	#autoTabs, #center1, #center2, #west {
    	    padding:10px;
    	}
    	#north, #south{
    	    font:normal 8pt arial, helvetica;
    	    padding:4px;
    	}
    	.x-layout-panel-center p {
    	    margin:5px;
    	}
    	#props-panel .x-grid-col-0{
    	}
    	#props-panel .x-grid-col-1{
    	}
    	</style>
    	<script type="text/javascript">
    	
    	Example = function(){
    	        var layout;
    	        return {
    	            init : function(){
    	               layout = new Ext.BorderLayout(document.getElementById('myDiv'), {
    	                    hideOnLayout: true,
    	                    north: {
    	                        split:false,
    	                        initialSize: 32,
    	                        titlebar: false
    	                    },
    	                    west: {
    	                        split:true,
    	                        initialSize: 200,
    	                        minSize: 175,
    	                        maxSize: 400,
    	                        titlebar: true,
    	                        collapsible: true,
                                animate: true
    	                    },
    	                    east: {
    	                        split:true,
    	                        initialSize: 202,
    	                        minSize: 175,
    	                        maxSize: 400,
    	                        titlebar: true,
    	                        collapsible: true,
                                animate: true
    	                    },
    	                    south: {
    	                        split:true,
    	                        initialSize: 100,
    	                        minSize: 100,
    	                        maxSize: 200,
    	                        titlebar: true,
    	                        collapsible: true,
                                animate: true
    	                    },
    	                    center: {
    	                        titlebar: true,
    	                        autoScroll:true,
                                closeOnTab: true
                            }
    	                });
    
                        layout.beginUpdate();
    	                layout.add('north', new Ext.ContentPanel('north', 'North'));
    	                layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
    	                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
    	                layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
    	                layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
    	                layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
    	                layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
    	                layout.getRegion('center').showPanel('center1');
    	                layout.getRegion('west').hide();
    	                layout.endUpdate();
    	           },
    	           
    	           toggleWest : function(link){
    	                var west = layout.getRegion('west');
    	                if(west.isVisible()){
    	                    west.hide();
    	                    link.innerHTML = 'Show West Region';
    	                }else{
    	                    west.show();
    	                    link.innerHTML = 'Hide West Region';
    	                }
    	           }
    	            
    	     };
    	       
    	}();
    	Ext.EventManager.onDocumentReady(Example.init, Example, true);
    	
    	</script>
    </head>
    <body>
    
          <div id="toolbar" style="height:32px;"></div>
          <div id="myDiv" style="position:relative;"></div>
        
    <script type="text/javascript" src="../examples.js"></script>
    <div id ="container">
      <div id="west" class="x-layout-inactive-content">
        
    
    I'm the west panel, pleased to make your acquaintance.</p>
      </div>
      <div id="north" class="x-layout-inactive-content">
        
    
    Hey, I'm the North panel dude!</p>
      </div>
      <div id="autoTabs" class="x-layout-inactive-content">
          The layout manager will automatically create and/or remove the TabPanel component when a region has more than one panel. Close one of my panels and you can see what I mean.
      </div>
      <div id="center2" class="x-layout-inactive-content">
            
    
    Show West Region</p>
            
    
    My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
            
    
    The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
            <hr>
            
    
    Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
      </div>
      <div id="center1" class="x-layout-inactive-content">
            
    
    Done reading me? Close me by clicking the X in the top right corner.</p>
            
    
    Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
      </div>
      <div id="props-panel" class="x-layout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
      </div>
      <div id="south" class="x-layout-inactive-content">
        south - generally for informational stuff, also could be for status bar
      </div>
    </div>
    
    </body>
    </html>

    menu.js(works in safari, not FF2)
    Code:
    /*
     * Ext - JS Library 1.0 Alpha 2
     * Copyright(c) 2006-2007, Jack Slocum.
     */
    
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        // Menus can be prebuilt and passed by reference
        var dateMenu = new Ext.menu.DateMenu({
            handler : function(dp, date){
                Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
            }
        });
    
        var menu = new Ext.menu.Menu({
            id: 'mainMenu',
            items: [
                new Ext.menu.CheckItem({
                    text: 'I like Ext',
                    checked: true,
                    checkHandler: onItemCheck
                }),
                new Ext.menu.CheckItem({
                    text: 'Ext for jQuery',
                    checked: true,
                    checkHandler: onItemCheck
                }),
                new Ext.menu.CheckItem({
                    text: 'I donated!',
                    checked:false,
                    checkHandler: onItemCheck
                }), '-', {
                    text: 'Radio Options',
                    menu: {        // <-- submenu by nested config object
                        items: [
                            // stick any markup in a menu
                            '<b class="menu-title">Choose a Theme[/b]',
                            new Ext.menu.CheckItem({
                                text: 'Aero Glass',
                                checked: true,
                                group: 'theme',
                                checkHandler: onItemCheck
                            }),
                            new Ext.menu.CheckItem({
                                text: 'Vista Black',
                                group: 'theme',
                                checkHandler: onItemCheck
                            }),
                            new Ext.menu.CheckItem({
                                text: 'Gray Theme',
                                group: 'theme',
                                checkHandler: onItemCheck
                            }),
                            new Ext.menu.CheckItem({
                                text: 'Default Theme',
                                group: 'theme',
                                checkHandler: onItemCheck
                            })
                        ]
                    }
                },{
                    text: 'Choose a Date',
                    cls: 'calendar',
                    menu: dateMenu // <-- submenu by reference
                }
            ]
        });
    
        var tb = new Ext.Toolbar('toolbar');
        tb.add({
                cls: 'x-btn-text-icon bmenu', // icon and text class
                text:'Button w/ Menu',
                menu: menu  // assign menu by instance
            }, 
            new Ext.Toolbar.MenuButton({
                text: 'Split Button',
                handler: onButtonClick,
                cls: 'x-btn-text-icon blist',
                // Menus can be built/referenced by using nested menu config objects
                menu : {items: [
                            {text: 'Bold', handler: onItemClick},
                            {text: 'Italic', handler: onItemClick},
                            {text: '<u>Underline</u>', handler: onItemClick}, '-',{
                            text: 'Pick a Color', handler: onItemClick, menu: {
                            items: [
                                    new Ext.menu.ColorItem({selectHandler:function(cp, color){
                                        Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                    }}), '-',
                                    {text:'More Colors...', handler:onItemClick}
                            ]
                        }},
                        {text: 'Extellent!', handler: onItemClick}
                    ]}
            }), '-', {
            text: 'Toggle Me',
            enableToggle: true,
            toggleHandler: onItemToggle,
            pressed: true
        });
    
        menu.addSeparator();
        // Menus have a rich api for
        // adding and removing elements dynamically
        var item = menu.add({
            text: 'Dynamically added Item'
        });
        // items support full Observable API
        item.on('click', onItemClick);
    
        // items can easily be looked up
        menu.add({
            text: 'Disabled Item',
            id: 'disableMe'  // <-- Items can also have an id for easy lookup
            // disabled: true   <-- allowed but for sake of example we use long way below
        });
        // access items by id or index
        menu.items.get('disableMe').disable();
    
        // They can also be referenced by id in or components
        tb.add('-', {
            icon: 'list-items.gif', // icons can also be specified inline
            cls: 'x-btn-icon',
            tooltip: 'Quick Tips
    Icon only button with tooltip'
        });
    
    
        // functions to display feedback
        function onButtonClick(btn){
            Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
        }
    
        function onItemClick(item){
            Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
        }
    
        function onItemCheck(item, checked){
            Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
        }
    
        function onItemToggle(item, pressed){
            Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
            
            if (pressed == false)
               {
                Ext.get("myDiv").slideOut('t');
                Ext.get("myDiv").hide();
    
                
               }
            else
               {
               Ext.get("myDiv").slideIn('t');
               Ext.get("myDiv").show();
               }
        }
    });
    menu.js(works in safari, not FF2)
    Code:
        function onItemToggle(item, pressed){
            Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
            
            if (pressed == false)
               {
                Ext.get("myDiv").slideOut('t');
                Ext.get("myDiv").setDisplayed(false);
    
                
               }
            else
               {
               Ext.get("myDiv").slideIn('t');
               Ext.get("myDiv").setDisplayed(true);
               }
        }
    ----------------------------------------------------------------------------------------------

    menu.js(works in safari, not FF2)
    Code:
        function onItemToggle(item, pressed){
            Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
            
            if (pressed == false)
               {
                Example.toggleHide();
               }
            else
               {
               Example.toggleShow();
               }
        }
    complex.html(with slide out, after displayed false, still visible in FF2)
    Code:
    	            toggleHide : function(){
    	              layout.getEl().slideOut('t');
    	              layout.getEl().setDisplayed(false);
      	           },
      	           toggleShow : function(){
      	             layout.getEl().setDisplayed(true);
      	             layout.getEl().slideIn('t');
       	           }
    complex.html(after displayed false, not visible in FF2, but messed regions after resize browser window)
    Code:
    	            toggleHide : function(){
    	              layout.getEl().setDisplayed(false);
      	           },
      	           toggleShow : function(){
      	             layout.getEl().setDisplayed(true);
       	           }
    ----------------------------------------------------------------------------------------------

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    57

    Default

    I just found that this works in FF2, I still haven't tried this with the slideIn/Out() function, but will post my findings in a bit:

    example.js
    Code:
    hideDiv : function(){
        var north = layout.getRegion('north');
        var east = layout.getRegion('east');
        var south = layout.getRegion('south');
        var west = layout.getRegion('west');
        var center = layout.getRegion('center');
        north.hide();
        east.hide();
        south.hide();
        west.hide();
        center.hide();
        layout.getEl().setDisplayed(false);
    },
    showDiv : function(){
        var north = layout.getRegion('north');
        var east = layout.getRegion('east');
        var south = layout.getRegion('south');
        var west = layout.getRegion('west');
        var center = layout.getRegion('center');
        layout.getEl().setDisplayed(true);
        north.show();
        east.show();
        south.show();
        west.show();
        center.show();
    }
    Now I have to assign the variables to remember which tabs/regions the user had open. Does anyone think that using sessions for this is good? I think I saw a thread about that somewhere in the forums, but if any one has any examples, could you please post or point me to them?(thank you)

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    57

    Default

    This works great with slideIn/Out() function:

    Code:
    hideDiv : function(){
      var north = layout.getRegion('north');
      var east = layout.getRegion('east');
      var south = layout.getRegion('south');
      var west = layout.getRegion('west');
      var center = layout.getRegion('center');
      north.hide();
      east.hide();
      south.hide();
      west.hide();
      center.hide();
      layout.getEl().slideOut('t');
      layout.getEl().setDisplayed(false);
      Ext.get('myDiv_container').setDisplayed(false); //this is div with css for border style, but I don't want it showing when the layout is hidden
    },
    showDiv : function(){
      var north = layout.getRegion('north');
      var east = layout.getRegion('east');
      var south = layout.getRegion('south');
      var west = layout.getRegion('west');
      var center = layout.getRegion('center');
      Ext.get('myDiv_container').setDisplayed(true);
      layout.getEl().setDisplayed(true);
      layout.getEl().slideIn('t');
      north.show();
      east.show();
      south.show();
      west.show();
      center.show();
    }
    feel free to DRY up this snip if you like

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    On hide:
    layout.getEl().setDisplayed(false);

    On show:

    layout.getEl().setDisplayed('block');
    layout.layout();

    While this should work, you could prevent any display:none issues with:

    On hide:
    var el = layout.getEl();
    el.hide();
    el.setLeftTop(-2000, -2000);

    On show:
    var el = layout.getEl();
    el.setLeftTop('','');
    el.show();
    // layout.layout(); maybe needed?

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    57

    Default

    Jack, Thanks for the code! I really like the second option because by moving it out of view, opposed to display:none, doesn't mess up any data in the layout. I also set the border div to displayed(false), because I found that it maintained the size of myDiv when myDiv was moved out of view.

    Just an observation: usually the contents of a div set to display:none are taken out, but something in the js keeps the layout present in this case, otherwise I would have to move the border div too.

    This is what I used:
    Code:
    hideDiv : function(){
          	             var el = layout.getEl();
          	             var br = Ext.get('myDiv_container')
                          el.hide();
                          el.setLeftTop(-2000, -2000);
                          br.setDisplayed(false);
                        },
    showDiv : function(){
                          var el = layout.getEl();
                          var br = Ext.get('myDiv_container')
                          br.setDisplayed(true);
                          el.setLeftTop('','');
                          el.show();                      
                        },

Similar Threads

  1. Element.show() and hide()
    By thejoker101 in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 5 Jan 2008, 5:24 AM
  2. element hide hide show bug
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2006, 7:16 AM
  3. Show and Hide.....
    By genius551v in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 15 Nov 2006, 9:41 PM
  4. BorderLayout, show/hide panel
    By catalin in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 26 Oct 2006, 12:36 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •