1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    118
    Vote Rating
    0
    maceido is on a distinguished road

      0  

    Question [2.2] panel, setVisible true not working

    [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
    17,148
    Vote Rating
    673
    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


    This appears to be a bug, I'll move it to the bugs forum.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

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

    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
    17,148
    Vote Rating
    673
    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


    It only happens when the panel is floating. I'll check it out later.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,148
    Vote Rating
    673
    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


    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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    17,148
    Vote Rating
    673
    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


    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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    17,148
    Vote Rating
    673
    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


    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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

Thread Participants: 3