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