[FNR] [1.2.4] BorderLayout breaks on re-add

[Cputerace]

We have a number of ContentPanels that serve various purposes. We allow the user to change between a few different layouts of those panels, all implemented with BorderLayout so the user can drag and resize individual ContentPanels. The draggable resize split bars between the panels work the first time the panels are added to the viewport, however they do not work when you remove the panels and re-add them with a different layout.

In the below code, there are 3 layouts each accessible via their own getLayoutx(), which is passed into setLayout(). There are 3 buttons in panel1 that can swap you between layouts. In onModuleLoad, you can change the initially selected layout and see that they all work initially, however as soon as you swap to a different layout (or re-load the same current layout), the splitbars dissapear and you cant resize the panels.


package com.nolij.prototype.gwtprototype.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class GwtPrototype implements EntryPoint {

private Viewport v = new Viewport();
private ContentPanel panel1 = new ContentPanel();
private ContentPanel panel2 = new ContentPanel();
private ContentPanel panel3 = new ContentPanel();

public void onModuleLoad() {
RootPanel.get().add(v);
v.setHeight("100%");
panel1.setHeading("Panel 1");
panel2.setHeading("Panel 2");
panel3.setHeading("Panel 3");
setupButtons();
setMyLayout(getLayout2());
}

private void setMyLayout(LayoutContainer layout) {
v.removeAll();
v.add(layout);
v.layout();
}

private LayoutContainer getLayout1() {
LayoutContainer lc = new LayoutContainer();
lc.setHeight("100%");
lc.setLayout(new BorderLayout());
BorderLayoutData panel1BLD = new BorderLayoutData(LayoutRegion.NORTH, .25f);
BorderLayoutData panel2BLD = new BorderLayoutData(LayoutRegion.CENTER);
BorderLayoutData panel3BLD = new BorderLayoutData(LayoutRegion.SOUTH, .25f);
panel1BLD.setSplit(true);
panel2BLD.setSplit(true);
panel3BLD.setSplit(true);
lc.add(panel1,panel1BLD);
lc.add(panel2,panel2BLD);
lc.add(panel3,panel3BLD);

return lc;
}

private LayoutContainer getLayout2() {
LayoutContainer lc = new LayoutContainer();
lc.setHeight("100%");
lc.setLayout(new BorderLayout());
BorderLayoutData panel1BLD = new BorderLayoutData(LayoutRegion.WEST, .25f);
BorderLayoutData panel2BLD = new BorderLayoutData(LayoutRegion.CENTER);
BorderLayoutData panel3BLD = new BorderLayoutData(LayoutRegion.EAST, .25f);
panel1BLD.setSplit(true);
panel2BLD.setSplit(true);
panel3BLD.setSplit(true);
lc.add(panel1,panel1BLD);
lc.add(panel2,panel2BLD);
lc.add(panel3,panel3BLD);

return lc;
}

private LayoutContainer getLayout3() {
LayoutContainer lc = new LayoutContainer();
lc.setHeight("100%");
lc.setLayout(new BorderLayout());
BorderLayoutData panel1BLD = new BorderLayoutData(LayoutRegion.NORTH, .25f);
BorderLayoutData panel2BLD = new BorderLayoutData(LayoutRegion.CENTER);
BorderLayoutData panel3BLD = new BorderLayoutData(LayoutRegion.EAST, .25f);
panel1BLD.setSplit(true);
panel2BLD.setSplit(true);
panel3BLD.setSplit(true);

lc.add(panel1,panel1BLD);
lc.add(panel2,panel2BLD);
lc.add(panel3,panel3BLD);

return lc;
}

private void setupButtons() {
Button layout1Button = new Button("Layout 1");
Button layout2Button = new Button("Layout 2");
Button layout3Button = new Button("Layout 3");
layout1Button.addListener(Events.OnClick, new Listener(){
public void handleEvent(BaseEvent be) {
setMyLayout(getLayout1());
}});
layout2Button.addListener(Events.OnClick, new Listener(){
public void handleEvent(BaseEvent be) {
setMyLayout(getLayout2());
}});
layout3Button.addListener(Events.OnClick, new Listener(){
public void handleEvent(BaseEvent be) {
setMyLayout(getLayout3());
}});

panel1.add(layout1Button);
panel1.add(layout2Button);
panel1.add(layout3Button);
}


}
Not yet tested on 1.2.3 as the viewport bug introduced prevents us from upgrading our environment to 1.2.3.

[sven]

Fixed in SVN.

[Cputerace]

Awesome, thanks!

Will this make it in 1.2.4?

[sven]

yes and also 2.0

[Cputerace]

I just checked my code against Version 1.2.4 and i am still getting an exception with the above prototype code.


[ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): Object doesn't support this property or method
number: -2146827850
description: Object doesn't support this property or method
at com.google.gwt.dom.client.Node$.insertBefore$(Native Method)
at com.extjs.gxt.ui.client.core.El.insertBefore(El.java:1262)
at com.extjs.gxt.ui.client.widget.SplitBar$2.handleEvent(SplitBar.java:116)
at com.extjs.gxt.ui.client.widget.SplitBar$2.handleEvent(SplitBar.java:1)
at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:73)
at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:443)
at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:426)
at com.extjs.gxt.ui.client.widget.Component.onLoad(Component.java:1368)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:116)
at com.extjs.gxt.ui.client.widget.Component.onAttach(Component.java:1323)
at com.extjs.gxt.ui.client.widget.Container.onAttach(Container.java:466)
at com.extjs.gxt.ui.client.widget.Container.doAttachChildren(Container.java:333)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:111)
at com.extjs.gxt.ui.client.widget.Component.onAttach(Component.java:1323)
at com.extjs.gxt.ui.client.widget.Container.onAttach(Container.java:466)
at com.extjs.gxt.ui.client.widget.ComponentHelper.doAttach(ComponentHelper.java:24)
at com.extjs.gxt.ui.client.widget.Container.doLayout(Container.java:367)
at com.extjs.gxt.ui.client.widget.Container.layout(Container.java:457)
at com.extjs.gxt.ui.client.widget.LayoutContainer.layout(LayoutContainer.java:238)
at com.nolij.prototype.gwtprototype.client.GwtPrototype.setMyLayout(GwtPrototype.java:38)
at com.nolij.prototype.gwtprototype.client.GwtPrototype.access$1(GwtPrototype.java:35)
at com.nolij.prototype.gwtprototype.client.GwtPrototype$2.handleEvent(GwtPrototype.java:103)
at com.extjs.gxt.ui.client.event.BaseObservable.fireEvent(BaseObservable.java:73)
at com.extjs.gxt.ui.client.widget.Component.fireEvent(Component.java:443)
at com.extjs.gxt.ui.client.widget.Component.onBrowserEvent(Component.java:725)
at com.google.gwt.user.client.DOM.dispatchEventImpl(DOM.java:1308)
at com.google.gwt.user.client.DOM.dispatchEventAndCatch(DOM.java:1287)
at com.google.gwt.user.client.DOM.dispatchEvent(DOM.java:1255)

[darrellmeyer]

The bug is now fixed. Please validate with this build http://extjs.com/playpen/gxt/gxt-1.2.4.zip

[Cputerace]

Seems to work now, thanks. Will there be a 1.2.5 soon, or should we use this 1.2.4+ version for now?

[Cputerace]

Darrell,
It seems the 1.2.4+ build you gave us introduced "Phantom splitbars". Run the following code:

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GwtPrototype implements EntryPoint{

Viewport viewport = new Viewport();
/**
* This is the entry point method.
*/
public void onModuleLoad() {
buildUI();
}


public void buildUI(){
RootPanel.get().add(viewport);
viewport.setHeight("100%");
viewport.add(buildDefaultUI());
viewport.layout();
}

public LayoutContainer buildDefaultUI(){

final LayoutContainer layoutContainer = new LayoutContainer();
layoutContainer.setLayout(new FlowLayout());
layoutContainer.setHeight("100%");
final ContentPanel bottomPanel = new ContentPanel();
bottomPanel.setLayout(new BorderLayout());
bottomPanel.setHeaderVisible(false);
bottomPanel.setHeight("100%");
bottomPanel.setBorders(false);

final BorderLayoutData eastPanelLayoutData = new BorderLayoutData(
LayoutRegion.EAST, 0.6f);
eastPanelLayoutData.setSplit(true);
eastPanelLayoutData.setMargins(new Margins(5, 5, 5, 5));
bottomPanel.add(new TestClass(), eastPanelLayoutData);


layoutContainer.add(bottomPanel);

return layoutContainer;

}
public class TestClass extends LayoutContainer
{
public TestClass()
{
BorderLayout bb = new BorderLayout();
bb.setEnableState(false);
setLayout(bb);

BorderLayoutData topContainerLayoutData = new BorderLayoutData(
LayoutRegion.CENTER, 0.5f);
topContainerLayoutData.setSplit(true);
ContentPanel topViewerPanel = new ContentPanel();
topViewerPanel.setHeading("Top Viewer Panel");
this.add(topViewerPanel, topContainerLayoutData);

BorderLayoutData bottomContainerLayoutData = new BorderLayoutData(
LayoutRegion.SOUTH, 0.5f);
bottomContainerLayoutData.setCollapsible(true);
bottomContainerLayoutData.setMargins(new Margins(5, 0, 0, 0));
bottomContainerLayoutData.setMaxSize(9999);
bottomContainerLayoutData.setSplit(true);
ContentPanel bottomViewerPanel = new ContentPanel();
bottomViewerPanel.setHeading("Bottom Viewer Panel");
this.add(bottomViewerPanel, bottomContainerLayoutData);
}
}

}

against the 1.2.4+ code, then collapse the southern layout region, then slowly move your mouse up and down the remaining center layout. You will notice around the middle there is a phantom split bar that appears. This is causing a mess with our application.

[sven]

Also that is now fixed in SVN