GXT（Ext-GWT）：ContentPanel的布局问题 [英] GXT (Ext-GWT): Layout problems with ContentPanel

问题描述

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

当我在ContentPanel之后尝试添加widget到topComponent时， （）

 public void onModuleLoad（）{
 
 final Viewport viewport = new Viewport（） ; 
 viewport.setLayout（new FitLayout（））; 
 
最终ContentPanel contentPanel =新的ContentPanel（新的FitLayout（））; 
 contentPanel.setHeaderVisible（false）; 
 
 final LayoutContainer topContainer = new LayoutContainer（
 new FlowLayout（））; 
 
最终按钮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）; 
 
 //稍后，向topComponent添加第二个按钮... 
 Scheduler.get（）。scheduleDeferred（new ScheduledCommand（）{
 @Override 
 public void execute（）{
 final Button buttonTwo = new Button（Top：Two）; 
 topContainer.add（buttonTwo）; //最初不显示
 
 topContainer.layout（）; //现在，buttonTwo出现，但是我们有
 //一个新问题：Bottom按钮消失... 
 
 contentPanel.layout（ true）; //这不会做任何事，顺便说一句，
} 
}）; 
} 
  

一个有趣的事情是，布局自行纠正，尽快我调整浏览器窗口。我能做些什么来使它重新正确地立即布局（我已经尝试在几个地方和组合中添加几个 layout（）调用等，但是没有任何）

（我使用GWT 2.1.1和GXT 2.2.1。）

解决方案

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

还有一件事是，您正在使用适用于contentPanel的FitLayout包含3个组件，一个FitLayout用于Containers中只有一个组件，它应该填写它的父项。

您需要考虑以下几点：

1）使用RowLayout，它可以更好地控制组件的布局方式。 2）决定哪个组件组件是否愿意放置垂直滚动条，因为您是动态添加组件。

对于您当前的需求，以下代码应该足够了：

  public void onModuleLoad（）{
 final Viewport viewport = new Viewport（）; 
 viewport.setLayout（new FitLayout（））; 
 
 //最终ContentPanel contentPanel =新的ContentPanel（新的FlowLayout（））; 
 // contentPanel.setHeaderVisible（false）; 
 
 final LayoutContainer topContainer = new LayoutContainer（
 new FlowLayout（））; 
 
最终按钮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）; 
 
最终的ContentPanel面板=新的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）; 
 
 //稍后，向topComponent添加第二个按钮... 
 Scheduler.get（）。scheduleDeferred（new ScheduledCommand（）{
 @Override 
 public void execute（）{
 final Button buttonTwo = new Button（Top：Two）; 
 topContainer.add（buttonTwo）; //首先不显示
面板。布局（true）; 
} 
}）; 
} 
  

I have a ContentPanel that fits the entire window. It has a topComponent, a widget in the center, and a bottomComponent.

I'm getting layout problems, when I try to add widgets to the topComponent after the ContentPanel has been rendered once:

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.
        }
    });
}

One interesting thing about this is, that the layout corrects itself, as soon as I resize the browser window. What can I do to make it re-layout correctly immediately (I've tried adding several layout() calls etc. in several places and combinations, but haven't had any luck so far.)

(I'm using GWT 2.1.1 with GXT 2.2.1.)

解决方案

This is happening because when you add another component to a FlowLayout it resizes, thus increasing its own height, which pushes the bottom component below the visible area. There is nothing in the code which shrinks the center component, such that the bottom component stays in its original place.

One more thing is that you are using FitLayout for contentPanel which contains 3 components, a FitLayout is used for Containers with only one component inside, which is supposed to fill out its parent.

You need to consider the following:

1) Use RowLayout, which allows a much better control on how components should be laid out

2) Decide on which component are you willing to place a vertical scroll bar, since you are adding components dynamically.

For your current requirement the following code should suffice:

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);
            }
        });
}

这篇关于GXT（Ext-GWT）：ContentPanel的布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！