GXT（Ext-GWT）：ContentPanel的布局问题

Question

我有一个适合整个窗口的ContentPanel。它有一个topComponent，一个位于中心的小部件和一个bottomComponent。

我越来越布局的问题，当我尝试小部件添加到的TopComponent后的ContentPanel已经呈现一次：

public void onModuleLoad() { 

    final Viewport viewport = new Viewport(); 
    viewport.setLayout(new FitLayout()); 

    final ContentPanel contentPanel = new ContentPanel(new FitLayout()); 
    contentPanel.setHeaderVisible(false); 

    final LayoutContainer topContainer = new LayoutContainer(
      new FlowLayout()); 

    final Button buttonOne = new Button("Top:One"); 
    topContainer.add(buttonOne); 

    contentPanel.setTopComponent(topContainer); 
    contentPanel.add(new Button("Center")); 
    contentPanel.setBottomComponent(new Button("Bottom")); 

    viewport.add(contentPanel); 
    RootPanel.get().add(viewport); 

    // Later, add a second button to the topComponent ... 
    Scheduler.get().scheduleDeferred(new ScheduledCommand() { 
     @Override 
     public void execute() { 
      final Button buttonTwo = new Button("Top:Two"); 
      topContainer.add(buttonTwo); // Doesn't show up at first. 

      topContainer.layout(); // Now, buttonTwo shows up. But we have 
          // a new problem: the "Bottom" button disappears... 

      contentPanel.layout(true); // This doesn't do anything, BTW. 
     } 
    }); 
} 

关于这个有趣的是，该布局将自行解决，尽快当我调整浏览器窗口。我可以做些什么来使它重新正确地立即布局（我试过在几个地方和组合中添加几个layout()等等，但是到目前为止还没有任何运气。）

（我正在使用GWT 2.1.1与2.2.1 GXT）

Answer 1

发生这种情况，因为当您将另一个组件添加到FlowLayout时，它会调整大小，从而增加其自身的高度，从而将底部组件推到可见区域下方。代码中没有缩小中间组件，使底部组件停留在原来的位置。

还有一件事是，您正在使用FitLayout for contentPanel，其中包含3个组件，FitLayout仅用于容器中只有一个组件，它应该填充其父项。

你需要考虑以下几点：

1）使用的RowLayout，它允许用户对如何组件一个更好的控制应当设置

2）决定对其中的成分，你愿意把垂直滚动条，因为您正在动态添加组件。

您当前需求下面的代码就足够了：

public void onModuleLoad() { 
     final Viewport viewport = new Viewport(); 
     viewport.setLayout(new FitLayout()); 

//  final ContentPanel contentPanel = new ContentPanel(new FlowLayout()); 
//  contentPanel.setHeaderVisible(false); 

     final LayoutContainer topContainer = new LayoutContainer(
       new FlowLayout()); 

     final Button buttonOne = new Button("Top:One"); 
     topContainer.add(buttonOne); 
// contentPanel.setTopComponent(topContainer); 
     final LayoutContainer centerPanel = new LayoutContainer(new FitLayout()); 

     centerPanel.add(new Button("Center")); 
// contentPanel.add(centerPanel); 
     final LayoutContainer botPanel = new LayoutContainer(new FlowLayout()); 
     botPanel.add(new Button("Bottom")); 
//  contentPanel.setBottomComponent(botPanel); 

     final ContentPanel panel = new ContentPanel(); 
     panel.setHeaderVisible(false); 
     panel.setLayout(new RowLayout(Orientation.VERTICAL));  


     panel.add(topContainer, new RowData(1, -1, new Margins(4))); 
     panel.add(centerPanel, new RowData(1, 1, new Margins(0, 4, 0, 4))); 
     panel.add(botPanel, new RowData(1, -1, new Margins(4))); 

     viewport.add(panel, new FlowData(10)); 


     RootPanel.get().add(viewport); 

     // Later, add a second button to the topComponent ... 
     Scheduler.get().scheduleDeferred(new ScheduledCommand() { 
      @Override 
      public void execute() { 
       final Button buttonTwo = new Button("Top:Two"); 
       topContainer.add(buttonTwo); // Doesn't show up at first. 
       panel.layout(true); 
      } 
     }); 
} 

Answer 2

一旦浏览器完成渲染窗口小部件就不会呈现该组件再这样做了一遍，我们可以使用 contentPanel.layout（） 或 contentPanel.layout（真） 它按照新布局重新呈现小部件。

Answer 3

发生这种情况，因为在这条语句被调用的topComponent的onRender事件：

contentPanel.setTopComponent(topContainer); 

然后，以后，要添加一个组件：topContainer.add(buttonTwo);。当您调整窗口大小时，将触发onRender事件，并显示您添加的按钮。解决您的问题涉及触发onRender事件topContainer。

不幸的是，onRender是受保护的，所以你不能直接调用它： http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/LayoutContainer.html#onRender%28com.google.gwt.user.client.Element,%20int%29

你将要使用fireEvent来触发这个程序，而不是手动调整窗口大小： http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Component.html#fireEvent%28com.extjs.gxt.ui.client.event.EventType%29