GXT (Ext-GWT): проблемы компоновки с ContentPanel - PullRequest
Новая
       5

GXT (Ext-GWT): проблемы компоновки с ContentPanel

6 голосов
/ 05 апреля 2011

У меня есть 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 с GXT 2.2.1.)

Ответы [ 3 ]

8 голосов
/ 10 апреля 2011

Это происходит потому, что когда вы добавляете другой компонент в FlowLayout, он изменяет размеры, увеличивая свою собственную высоту, которая выдвигает нижний компонент ниже видимой области. В коде нет ничего, что сжимало бы центральный компонент, так что нижний компонент остается на своем прежнем месте.

Еще одна вещь заключается в том, что вы используете FitLayout для 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);
            }
        });
}
1 голос
/ 08 апреля 2011

Это происходит потому, что в этом выражении вызывается onRender событие topComponent: 

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

0 голосов
/ 06 апреля 2011

после того, как браузер завершит рендеринг виджета, он не будет рендерить этот компонент снова, поэтому, чтобы сделать это снова, мы можем использовать contentPanel.layout () или contentPanel.layout (true), он повторно отображает виджеты согласно новому макету.

...