Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default [FIXED]Collapsed Portals not working

    [FIXED]Collapsed Portals not working


    Probably already on the list somewhere but I've found that if a portal is created with the collapsed: true config option that the content never gets rendered.

    Use the portal example (ext-4.0-pr2/examples/portal/portal.html) and add "collapsed:true" to any of the portals to reproduce.

    Is there a workaround that anyone can offer?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Does this work for you?

    Code:
    Ext.override(Ext.panel.Panel, {
        onRender: function(ct, position) {
            var me = this,
                topContainer;
    
            // Correct border visibility just before render.
            if (me.border === false) {
                me.hideBorders();
            }
    
            // Add class-specific header tools.
            // Panel adds collapsible and closable.
            me.initTools();
    
            // Dock the header/title
            me.updateHeader();
    
            // Call to super after adding the header, to prevent an unnecessary re-layout
            me.callParent(arguments);
    
            // If initially collapsed, collapsed flag must indicate true current state at this point.
            // Do collapse after the first time the Panel's structure has been laid out.
            if (me.collapsed) {
                me.collapsed = false;
                var topContainer = me.up(':not([ownerCt])');
                if (topContainer) {
                    topContainer.on({
                        afterLayout: function() {
                            me.collapse(null, false, true);
                        },
                        single: true
                    });
                } else {
                    me.componentLayout.afterLayout = function() {
                        delete me.componentLayout.afterLayout;
                        this.constructor.afterLayout.apply(this, arguments);
                        me.collapse(null, false, true);
                    };
                }
            }
        }
    });

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default


    Unfortunately that didn't help.

    The way I am currently working around the problem is by adding an afterrender listener to the viewport and explicitly collapsing any portals that need to be.


    Code:
     
    listeners: {
      afterrender:{fn:function(){
        // Add expand/collapse state here for all portals...
        Ext.getCmp('MyPortal').collapse();
      }}
    }

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That's basically what the code does. It hooks into the first firing of the Viewport's afterlayout event.

    Is it not getting the viewport from the me.up(':not([ownerCt])') call?

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default


    The problem I see depends on where I insert your code and what I set my .

    If I insert the whole block in my top level just before I create my viewport in the Ext.onReady() I get the following error:
    Error: [Ext.panel.Panel#render] this.parent was called but there's no such method (render) found in the parent class (Ext.Base)


    If I override the onRender of my widget panel with the onRender you provided and set the collapsed option to true, I get the following error:
    Line: 64538 Error: 'header' is null or not an object


    I just tried the above but set the collapsed option to false. The actually results in my portal initially collapsed and rendered properly. I'll take a closer look to see what is going on.


  6. #6
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default


    My mistake. When I tried it this morning I had forgot to disable my work around.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So that code works for you?

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default


    The code you sent doesn't work for me. I'm still using the work around that I put in there where I explicitly collapse all the desired portals/panels from the viewport afterrender.

    Not sure why yours doesn't work because like you said - it is basically doing the same thing as my work around.


    I was mistaken only about the last point that I had made in my earlier post from today. I had said that it was collapsing with your code in there and the collapse option set to false. This wasn't the case because it was actually my work around, that I forgot to comment out during that one test, that was closing the portal.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So with my override it is not collapsing? No errors? What happens if you set a breakpoint in the afterlayout handler? Does it get there?

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Location
    Ontario, Canada
    Posts
    11
    Vote Rating
    -1
    ngamble is an unknown quantity at this point

      0  

    Default


    Below is a stripped down example that shows the problem I am seeing.

    If I add the config option collapse:true to the panel it doesn't render properly.

    If I set config option collapse:false and use the viewport afterrender to explicitly collapse the panel it works fine.

    With your block of code (Ext.override(...)) inserted before the Ext.onReady line I get the following error when it executes the line me.callParent(arguments):

    Message: [Ext.panel.Panel#render] this.parent was called but there's no such method (render) found in the parent class (Ext.Base)
    Line: 2392
    Char: 17
    Code: 0

    It never makes it beyond that.


    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Ext.Panel</title>
      <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
      <script type="text/javascript" src="../../bootstrap.js"></script>
    
      <script type="text/javascript">
      Ext.require([
          '*'
      ]);
    
      // INSERT YOUR Ext.override(...) BLOCK HERE
    
      Ext.onReady(function() {
          var html = '<p>This is a test.</p>';
    
          Ext.createWidget('viewport', {
              items:[{
                  xtype: 'panel',
                  id: 'TestPanel',
                  title: 'Basic Panel',
                  collapsible:true,
    //              collapsed: true, // COMMENT THIS LINE OUT TO RENDER CORRECTLY
                  width:400,
                  html: html
                }]
    // UNCOMMENT THE FOLLOWING LINES (WITH collapsed:false) TO RENDER CORRECTLY 
    //            ,listeners: {
    //                afterrender:{fn:function(){
    //                    Ext.getCmp('TestPanel').collapse();
    //            }}
    //          }
          });
      });
    </script>
    </head>
    <body>
    </body>
    </html>
    
    
    

Similar Threads

  1. [FIXED-621] Collapsed Region Disappears on Expand
    By zachext in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 24 Feb 2010, 5:32 PM
  2. [FIXED][2.*,3.0] layout in collapsed Panels
    By Animal in forum Ext 3.x: Bugs
    Replies: 14
    Last Post: 16 Jun 2009, 1:53 PM
  3. Portlet width resizing issue when nesting portals inside of portals
    By code loki in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Jun 2009, 1:32 AM
  4. [FIXED] [2.*,3.0] layout in collapsed Panels
    By Animal in forum Ext 2.x: Bugs
    Replies: 6
    Last Post: 27 Mar 2009, 7:22 AM
  5. [FIXED] B5 contentpanel not collapsed on 1st render
    By gslender in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 17 Jun 2008, 6:10 AM

Thread Participants: 1