[2.2] panel, setVisible true not working

**maceido** · 13 Oct 2008 8:43 AM

This simple code creates a panel that is visible by default.
When the user clicks a button, it hides.
When the user clicks the button again, it should show again.
but this last step does not work.

What can be the problem?

Regards,
David

Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
     <script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
</head>
<body>
<div id="mybutton_div"></div>
<div id="mypanel_div"></div>

    <script type="text/javascript">
    Ext.onReady(function(){
        var myPanel = new Ext.Panel({
            floating: true,
            x: 100, y: 100, height: 200, width: 200,
            renderTo: 'mypanel_div',
            html: "MyPanel",
        });
    
        var isVisible = true;
        function showHide() {
            isVisible = !isVisible;
            myPanel.setVisible(isVisible);
        }

        var myButton = new Ext.Button({text: 'show/hide', handler: showHide, renderTo:'mybutton_div'});
    });
</script>
</body>
</html>

**evant** · 13 Oct 2008 2:48 PM

This appears to be a bug, I'll move it to the bugs forum.

**hendricd** · 13 Oct 2008 4:27 PM

Originally Posted by maceido

This simple code creates a panel that is visible by default.
When the user clicks a button, it hides.
When the user clicks the button again, it should show again.
but this last step does not work.

What can be the problem?

Try this version:

Code:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
     <script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
</head>
<body>
<div id="mybutton_div"></div>
<div id="mypanel_div"></div>

    <script type="text/javascript">
    Ext.onReady(function(){
        var myPanel = new Ext.Panel({
            floating: true,
            x: 100, y: 100, height: 200, width: 200,
            renderTo: 'mypanel_div',
            html: "MyPanel",
        });
    
        function showHide() {
            myPanel.setVisible(!myPanel.isVisible());
        }

        var myButton = new Ext.Button({text: 'show/hide', handler: showHide, renderTo:'mybutton_div'});
    });
</script>
</body>
</html>

**evant** · 13 Oct 2008 4:29 PM

It only happens when the panel is floating. I'll check it out later.

**evant** · 13 Oct 2008 9:18 PM

Ok, I'd probably make the following changes:

Code:

//get rid of the return values in onShow/onHide since they don't get used
Ext.override(Ext.Panel,
{
   onShow: function()
   {
      if (this.floating)
         this.el.show();
      else
         Ext.Panel.superclass.onShow.call(this);
   },

   onHide: function()
   {
      if (this.floating)
         this.el.hide();
      else
         Ext.Panel.superclass.onHide.call(this);
   },

   makeFloating: function(cfg)
   {
        this.floating = true;
        this.el = new Ext.Layer(
            typeof cfg == 'object' ? cfg : {
                shadow: this.shadow !== undefined ? this.shadow : 'sides',
                shadowOffset: this.shadowOffset,
                constrain:false,
                useDisplay: true,
                shim: this.shim === false ? false : undefined
            }, this.el
        );
   }
}
);

**Condor** · 13 Oct 2008 9:50 PM

Using display:none to hide components can affect sizing. I would prefer to keep using visibility:hidden and only fix the wrong offset, e.g.

Code:

var supr = Ext.Element.prototype;
Ext.override(Ext.Layer, {
	hideAction : function(){
		this.visible = false;
		if(this.useDisplay === true){
			this.setDisplayed(false);
		}else{
			supr.setLeftTop.call(this, -10000, -10000);
		}
	}
});

**evant** · 13 Oct 2008 10:07 PM

Yeah, if you look at the showAction it checks for a lastXY, but it doesn't get set. I'll look at doing it that way.

**Condor** · 13 Oct 2008 10:10 PM

Actually, it's lastLT and not lastXY that gets overwritten by the this.setLeftTop(-10000, -10000) in the original Ext.Layer.hideAction().

**evant** · 14 Oct 2008 3:43 PM

David, can you try the following override?

Code:

Ext.override(Ext.Panel,
{
   onShow: function()
   {
      if (this.floating)
      {
         this.el.lastLT = this.lastLT;
         this.el.show();
         delete this.el.lastLT
      }
      else
         Ext.Panel.superclass.onShow.call(this);
   },

   onHide: function()
   {
      if (this.floating)
      {
         this.lastLT = [this.el.getLeft(), this.el.getTop()];
         this.el.hide();
      }
      else
         Ext.Panel.superclass.onHide.call(this);
   }
}
);

**Condor** · 14 Oct 2008 9:24 PM

Why are you trying to fix Ext.Panel when the bug is in Ext.Layer (see fix in my previous post)?

[2.2] panel, setVisible true not working

Thread Tools

Search Thread

Display

[2.2] panel, setVisible true not working

[2.2] panel, setVisible true not working

Are you really in-synch with Panel Visibility state?

Are you really in-synch with Panel Visibility state?