PDA

View Full Version : Beta 1 - NorthSouthContainer behavior different from TopBottomComponent of DP5?



jvahabzadeh
29 Dec 2011, 6:23 AM
I've noticed a behavior change in this class, and am wondering if it's deliberate or not, or, at least, how to get the old behavior.

In code I'd written to work with DP5, I basically created a screen where I:
- Add a Viewport to the RootPanel
- Add a TopBottomComponent to the Viewport
- Set the top widget of the TopBottomComponent component to a MenuBar
- Set the bottom widget of the TopBottomComponent component to a FlowLayoutContainer
- Set the widget of the TopBottomComponent to a ContentPanel

This worked as I'd expected. The MenuBar was at the top of the screen, and the FlowPanelContainer's contents were at the bottom.

However, in Beta 1, with the same exact code, except that:
- TopBottomComponent is changed to NorthSouthContainer
- setNorthWidget instead of setTopWidget
- setSouthWidget instead of setBottomWidget

the behavior is now different. Instead of the MenuBar being on top, it is instead immediately above the FlowPanelContainer. The FlowPanelContainer is, as expected, on the bottom.

Is this a bug, or do I need to handle this in a different way than would be done in DP5?

sven
29 Dec 2011, 7:49 AM
Please try this patch:
Index: src/main/java/com/sencha/gxt/widget/core/client/container/NorthSouthContainer.java===================================================================
--- src/main/java/com/sencha/gxt/widget/core/client/container/NorthSouthContainer.java (revision 2022)
+++ src/main/java/com/sencha/gxt/widget/core/client/container/NorthSouthContainer.java (working copy)
@@ -43,6 +43,18 @@
}

@Override
+ @UiChild(limit = 1, tagname = "widget")
+ public void setWidget(Widget w) {
+ if (this.widget != null) {
+ this.widget.removeFromParent();
+ }
+ this.widget = w;
+ if (this.widget != null) {
+ insert(widget, this.northWidget != null ? 1 : 0);
+ }
+ }
+
+ @Override
protected void doLayout() {
if (widget != null) {
Size size = getContainerTarget().getStyleSize();




As workaround try to first set the widget and after that add the north and south widget

Konstantin.Scheglov
31 Jan 2012, 11:50 AM
Beta2.
I still have same problem in UiBinder with NorthSouthContainer.
I have to set "north" after "child".

sven
31 Jan 2012, 11:52 AM
Beta2.
I still have same problem in UiBinder with NorthSouthContainer.
I have to set "north" after "child".

Have you tried the provided patch from above?

Konstantin.Scheglov
31 Jan 2012, 1:33 PM
I've tried now.
With patch it works correctly.

Konstantin.Scheglov
31 Jan 2012, 5:10 PM
<container:NorthSouthContainer styleName="{style.panel}" borders="true"> <container:south>
<button:TextButton text="AAAAAAAA"/>
</container:south>
</container:NorthSouthContainer>


Using NorthSouthContainer with only "south" widget also renders bad UI.
At first it looks not "south", but as "north".
And at second it is not stretched horizontally.
31206

sven
6 Feb 2012, 10:49 AM
I've tried now.
With patch it works correctly.

This is now fixed in SVN and will be part of the next release.

sven
6 Feb 2012, 10:50 AM
<container:NorthSouthContainer styleName="{style.panel}" borders="true"> <container:south>
<button:TextButton text="AAAAAAAA"/>
</container:south>
</container:NorthSouthContainer>


Using NorthSouthContainer with only "south" widget also renders bad UI.
At first it looks not "south", but as "north".
And at second it is not stretched horizontally.
31206

Can you please provide a fully working testcase implementing EntryPoint for the problem you are seeing?

Konstantin.Scheglov
6 Feb 2012, 12:41 PM
Do you support UiBinder? :-)


public class ImageViewer implements EntryPoint { public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
{
NorthSouthContainer container = new NorthSouthContainer();
container.setBorders(true);
rootPanel.add(container, 10, 10);
container.setSize("250px", "200px");
// "south" rendered on "north", not stretched horizontally
container.setSouthWidget(new Button("SSSSSSSSSSSS"));
}
}
}

sven
6 Feb 2012, 12:47 PM
You are missing a call to forceLayout in that example code.

Konstantin.Scheglov
6 Feb 2012, 12:52 PM
Adding container.forceLayout() does not help.

31412

sven
6 Feb 2012, 12:55 PM
Sorry, you are correct. You are missing the center region completly, which is required to position it at the south. The layout method is not doing anything without a center widget defined.
public class ImageViewer implements EntryPoint { public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
{
NorthSouthContainer container = new NorthSouthContainer();
container.setBorders(true);
rootPanel.add(container, 10, 10);
container.setWidget(new HTML());
container.setSize("250px", "200px");
// "south" rendered on "north", not stretched horizontally
container.setSouthWidget(new Button("SSSSSSSSSSSS"));
}
}
}

Konstantin.Scheglov
6 Feb 2012, 1:00 PM
1. Why I do this? Because I can. GXT 3 is about making things easier and safer, right? :-)

2. I've tried to add container after setting south widget. No difference.
31413

sven
6 Feb 2012, 1:04 PM
You should not write your code in a way that forces two layoutchains, as this will always end in being slow. Before adding something to the rootpanel, first build it completly. The good thing is that GXT alraedy caches multiple layout chains.

However a NorthSouthContainer always requires the center region, please see the edited post.

sven
6 Feb 2012, 1:09 PM
I updated the code to update atleast the width if no center region is specified, this change is in SVN now. However the south part will always be displayed under the center region. If there is no, than its under the north region. If that is also missing than its the top part.

Konstantin.Scheglov
6 Feb 2012, 1:10 PM
OK, thank you for help and fixes.

sven
6 Feb 2012, 1:19 PM
The change will be in the next beta release.