ContentPanel Collapsible Weird Behaviour

[francescoNemesi]

Hello,

this is a follow up to a thread I posted about a month ago

http://extjs.com/forum/showthread.php?t=47124

I finally found the time to write a stand alone EntryModule that replicated the weird behavior. This code creates a Button and a TabPanel with 2 TabItem(s). When the button is clicked, a Collapsible ContentPanel is added dynamically to the active TabItem. Follow the steps below to replicate the issue:

1) Add one ContentPanel
2) Add another ContentPanel to the same TabItem. The second CP should now be underneath the first one.
3) Drag the second CP by is header above the first one, leaving the header of the first on visible
4) Collapse and expand the second CP. All is well.
5) Collapse the first CP, you will see the second CP is also "transposed" and its header disappears
6) Expand the first CP and the second one reappears fully in the TabItem (This is the issue).
7) Add a third CP.
8) Collapse and expand the third CP. All is well.
9) Collapse and expand the second CP, you will see the third CP being moved along the second one while the first remains in its position.
10) Collapse the fist CP and you will see the second and third CP being moved along it whilst keeping their relative vertical distance unchanged.

Now you can repeat steps 7 to 10 forever and you will see the same relative behavior. I think the problem lays in the fact that every new CP is created with a relative height to the previous one that somehow must stay the same when the previous one is collapsed/expanded.

Personally I think every CP should collapse/expand independently from all the others.

The code is below, I hope I made myself clear...

Thanks for any help.

Francesco



import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.fx.Resizable;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class CPTest implements EntryPoint {

private static int counter = 0;

public void onModuleLoad() {

VerticalPanel vp = new VerticalPanel();

Button button = new Button("Add Content Panel");

final TabPanel tabPanel = new TabPanel();
tabPanel.setHeight(600);
tabPanel.setWidth(800);

TabItem tabItemOne = new TabItem("Tab Item One");
tabPanel.add(tabItemOne);

TabItem tabItemTwo = new TabItem("Tab Item Two");
tabPanel.add(tabItemTwo);

vp.add(button);
vp.add(tabPanel);
RootPanel.get().add(vp);

button.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
TabItem active = tabPanel.getSelectedItem();
ContentPanel contentPanel = new ContentPanel();
contentPanel.setWidth(300);
contentPanel.setHeight(200);
contentPanel.setCollapsible(true);
contentPanel.getHeader().setStyleAttribute("cursor", "move");

contentPanel.add(new Html("<H2>Content Panel Number : "+(++counter)+"</H2"));

Draggable draggable = new Draggable(contentPanel,contentPanel.getHeader());
draggable.setUseProxy(true);
draggable.setContainer(active);

new Resizable(contentPanel);

active.add(contentPanel);
active.layout();
}
});

}
}

[gslender]

set the layout of the tabitem container to an AbsoluteLayout - i think its FlowLayout and its probably the reason this is going wrong...

[francescoNemesi]

Sure enough, that was the problem... =D>=D>=D>

As ever and as always... THANKS!