Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: [2.2] panel, setVisible true not working

  1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    118
    Vote Rating
    0
      0  

    Question [2.2] panel, setVisible true not working

    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>

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

    This appears to be a bug, I'll move it to the bugs forum.
    Evan Trimboli
    Twitter - @evantrimboli

  3. #3
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966
    Vote Rating
    15
      0  

    Default Are you really in-synch with Panel Visibility state?

    Quote Originally Posted by maceido View Post
    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>
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

    It only happens when the panel is floating. I'll check it out later.
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

    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
            );
       }
    }
    );
    Evan Trimboli
    Twitter - @evantrimboli

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

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

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

    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.
    Evan Trimboli
    Twitter - @evantrimboli

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

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

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,608
    Vote Rating
    874
      0  

    Default

    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);
       }
    }
    );
    Evan Trimboli
    Twitter - @evantrimboli

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

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

Page 1 of 2 12 LastLast

Posting Permissions

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