PDA

View Full Version : [FIXED]Collapsed Portals not working



ngamble
3 Mar 2011, 8:49 AM
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
5 Mar 2011, 5:11 PM
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
5 Mar 2011, 9:29 PM
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
5 Mar 2011, 10:13 PM
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
6 Mar 2011, 10:01 AM
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
6 Mar 2011, 10:20 AM
My mistake. When I tried it this morning I had forgot to disable my work around.

Animal
6 Mar 2011, 10:11 PM
So that code works for you?

ngamble
6 Mar 2011, 10:34 PM
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
7 Mar 2011, 1:12 AM
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
7 Mar 2011, 8:24 AM
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>

Animal
7 Mar 2011, 10:19 AM
With the latest code I have here, this file works perfectly:



<!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([
'*'
]);

Ext.onReady(function() {
var html = '<p>This<br>is<br>a<br>test.</p>';

Ext.createWidget('viewport', {
items:[{
xtype: 'panel',
id: 'TestPanel',
title: 'Basic Panel',
collapsible:true,
collapsed: true,
width:400,
html: html
}]
});
});
</script>
</head>
<body>
</body>
</html>


So I've committed my fix for the next release.

ngamble
7 Mar 2011, 10:23 AM
Great. I'll try it out once the latest release is available.
Thanks for the help.