Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default Beta 1 - ToolBar with status at bottom of Window invisible until resized? Why?

    Beta 1 - ToolBar with status at bottom of Window invisible until resized? Why?


    I have created a Window whose Widget is a NorthSouthContainer.

    The NorthWidget is a ToolBar with two buttons added to it.

    The SouthWidget is a ToolBar with a Status added to it.

    However, when I show() the Window, the north ToolBar is visible, but the south ToolBar with the Status is not, unless I manually resize the window by dragging an edge or corner.

    Any idea why?

    Here's the code to reproduce the issue:
    PHP Code:
    public class WindowStatusBarIssue implements EntryPoint {

      public 
    void onModuleLoad() {
        
    Window w = new Window();
        
    NorthSouthContainer container = new NorthSouthContainer();
        
    ToolBar toolBar = new ToolBar();
        
    toolBar.add(new TextButton("Button-1"));
        
    toolBar.add(new TextButton("Button-2"));
        
    ToolBar statusBar = new ToolBar();
        
    Status status = new Status();
        
    status.setText("Ready...");
        
    statusBar.add(status);
        
    VerticalLayoutContainer layoutContainer = new VerticalLayoutContainer();
        
    layoutContainer.add(new Label("some info"));
        
    layoutContainer.add(new Label("more stuff"));
        
    container.setWidget(layoutContainer);
        
    container.setNorthWidget(toolBar);
        
    container.setSouthWidget(statusBar);
        
    w.add(container);
        
    w.setWidth(400);
        
    w.setHeight(250);
        
    layoutContainer.forceLayout(); // can you tell
        
    container.forceLayout(); // that I was starting
        
    w.forceLayout(); // to get desperate here?
        
    w.show();
      }


  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    johnz45 is on a distinguished road

      0  

    Default


    have you tried setting the layoutData of the toolbars to divide the height between the two toolbars?

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    I haven't tried that . . basically my Window will show (once I've done a manual resize) the ToolBar with Buttons on top, and the ToolBar with Status on bottom, with a relatively large open area in the middle.

    I was hoping not to have to explicitly size them - I would guess that it shouldn't be necessary because, once a resize is done, it seems to know what to do.

    However, I'm actually a little unclear on what you mean:
    have you tried setting the layoutData of the toolbars to divide the height between the two toolbars?
    Um, can you clarify what you mean/intend by that?

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    johnz45 is on a distinguished road

      0  

    Default


    For your purpose, have you tried using a VerticalLayoutContainer? It seems your spacing issue is because your NorthSouthContainer is resizing to the parent size. If I want to guarantee 50/50 split sizing for 2 widgets, I use:

    Code:
        mainVert.add(graphPanel, new VerticalLayoutData(1,0.5));
        mainVert.add(actionPanel, new VerticalLayoutData(1,0.5));

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    Ah, but I don't want a 50/50 split, I'm looking specifically for basically what amounts to a BorderLayout with only North, South, and Center components.

    The baffling thing is that, once I manually resize (and it can be literally resizing it only a single pixel larger by dragging the corner with the mouse), it looks EXACTLY how I want it, but before I do that, the South part is invisible.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    21
    Vote Rating
    0
    robferguson is on a distinguished road

      0  

    Default


    Hi,

    Have you tried calling forceLayout() ?

    Cheers
    Rob

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    Yep . . 3 of the last 4 lines in my code above are calls to forceLayout on various components.

    No luck with that.

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    21
    Vote Rating
    0
    robferguson is on a distinguished road

      0  

    Default


    Hi,

    I have also found that you sometimes need to perform an initial size/re-size on widgets added to a layout container. For example:

    Code:
    public abstract class AbstractPagingView<C extends UiHandlers> extends ViewWithUiHandlers<C> {
    
      public static final String CONTEXT_AREA_WIDTH = "100%";
      public static final String CONTEXT_AREA_HEIGHT = "100%";
      public static final String TOOLBAR_HEIGHT = "26px";
    
      protected VerticalLayoutContainer panel;
    
      protected final ToolBar toolBar;
      protected final Grid<?> grid;
    
      @Inject
      public AbstractPagingView(ToolBar toolBar, final Grid<?> grid) {
        super();
    
        this.toolBar = toolBar;
        this.grid = grid;
    
        this.panel = new VerticalLayoutContainer();
        this.panel.setSize(CONTEXT_AREA_WIDTH, CONTEXT_AREA_HEIGHT);
        this.toolBar.setSize(CONTEXT_AREA_WIDTH, TOOLBAR_HEIGHT);
        this.grid.setSize(CONTEXT_AREA_WIDTH, TOOLBAR_HEIGHT);
    
        this.panel.add(this.toolBar, new VerticalLayoutData(1, -1));
        this.panel.add(this.grid, new VerticalLayoutData(1, 1));
    
        Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
          public void execute() {
            resize();
          }
        });
    
        bindCustomUiHandlers();
      }
    
      public void resize() {
    
        int width = Window.getClientWidth();
        int height = Window.getClientHeight();
    
        Log.debug("resize() - width: " + width + " height: " + height);
    
        panel.setSize(width + "px", height + "px");
        panel.onResize();
      }
    Also, take a look at the layout code for ResizeContainer.

    Cheers
    Rob

  9. #9

  10. #10
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    This is now fixed in SVN. Change will go out in the next release. As a workaround, you can use VerticalLayoutContainer rather than NorthSouthContainer. Use VerticalLayoutData values of 1, -1 for the top and bottom components, and value of 1,1 for the center widget.