[FIXED]Collapsed Portals not working

[ngamble]

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?

[Animal]

Does this work for you?

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

[ngamble]

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.

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

[Animal]

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?

[ngamble]

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.

[ngamble]

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

[Animal]

So that code works for you?

[ngamble]

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.

[Animal]

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?

[ngamble]

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.

<!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>