PDA

View Full Version : why the panel can't expand after it collapsed



Rooock
27 Jul 2009, 12:47 AM
In my codes, there is a layout named 'accordion' in a Panel:


new Ext.Panel({
layout:'accordion',
split:true,
collapsible: true,
layoutConfig:{animate:true},
items:[createGridPanel(),{
id:'preview',
collapsed:true,
height:666,
title:'preview',
split:true,
bodyStyle: 'padding: 10px; font-family: Arial; font-size: 12px;'
}]


the function 'createGridPanel()' create and return a GridPanel which could expand, and then, it can't collapsed (use IE is OK, but use the firefox, opera, safari... can't collapsed! )

the codes of 'createGridPanel()' are:


var grid = new Ext.grid.GridPanel({
ds: ds(),
cm:cm(),
view: mainGridGroupingView,
plugins: summary,
frame: true,
height:300,
autoWidth:true,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
enableColumnMove: true
});
grid.store.load();
return grid;


why? the attachments is the Print Screen of my App

jay@moduscreate.com
11 Aug 2009, 4:13 AM
try setting a height on the master container panel or set autoHeight to true.

Animal
11 Aug 2009, 4:23 AM
Accordion extends fit layout (but subtracts the cumulative heights of all available headers).

So sizing is applied by the layout.

There's something else going on.

Animal
11 Aug 2009, 4:25 AM
Of course the accordion Panel itself must be sized...

jay@moduscreate.com
11 Aug 2009, 4:31 AM
Of course the accordion Panel itself must be sized...

That was my original point. I've updated my post to reflect this.

jay@moduscreate.com
11 Aug 2009, 4:31 AM
I dislike vague questions like this. You don't know if the panel with the accordion layout is being managed by another container. ugh!

Äkim
7 Sep 2009, 8:33 AM
I dislike vague questions like this. You don't know if the panel with the accordion layout is being managed by another container. ugh!

It's not that vague. I can shed some light on it: The problem even occurs with the samples from the ext 2.3 API Doc. (Full context, slightly modified to enhance the effect).


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css (http://www.extjs.com/forum/view-source:file:///D:/tmp/ext/resources/css/ext-all.css)">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js (http://www.extjs.com/forum/view-source:file:///D:/tmp/ext/adapter/ext/ext-base.js)"></script>
<script type="text/javascript" src="ext/ext-all-debug.js (http://www.extjs.com/forum/view-source:file:///D:/tmp/ext/ext-all-debug.js)"></script>

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady(function() {

var accordion = new Ext.Panel({
renderTo: Ext.getBody(),
title: 'Accordion Layout',
layout:'accordion',
autoHeight: true,
defaults: {
// applied to each contained panel
bodyStyle: 'height: 300px; padding: 15px'
},
layoutConfig: {
animate: true,
},
items: [{
title: 'Panel 1',
html: '<p>Panel content!</p>'
},{
title: 'Panel 2',
html: '<p>Panel content!</p>'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>'
}]
});

});

</script>
</head>
<body>
</body>
</html> Initially all looks good. You may click on each titlebar to expand another panel.

If you click on the active title, the active panel is collapsed. Now you can never reopen any panel to it's full size again (checked with Firefox 3.0.13).

Any progress on this topic so far?