GXT (Ext-GWT): Problemas de diseño con ContentPanel

Question

Tengo un Panel de contenido que se ajusta a toda la ventana. Tiene un topComponent, un widget en el centro y un bottomComponent.

estoy recibiendo problemas de diseño, cuando intento agregar widgets a la topComponent después de la ContentPanel se ha prestado una vez:

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

Un aspecto interesante de esto es que el diseño se corrige solo, tan pronto a medida que cambio el tamaño de la ventana del navegador. ¿Qué puedo hacer para que se vuelva a diseñar correctamente de forma inmediata? He intentado agregar varias llamadas layout(), etc. en varios lugares y combinaciones, pero hasta ahora no he tenido suerte.)

(Estoy usando GWT 2.1.1 con GXT 2.2.1.)

Answer 1

Esto sucede porque cuando agrega otro componente a FlowLayout, cambia el tamaño, lo que aumenta su propia altura, lo que empuja al componente inferior debajo del área visible. No hay nada en el código que encoja el componente central, de modo que el componente inferior permanezca en su lugar original.

Una cosa más es que está usando FitLayout para contentPanel que contiene 3 componentes, un FitLayout se usa para Contenedores con solo un componente adentro, que supuestamente debe llenar su matriz.

debe tener en cuenta lo siguiente:

1) Uso RowLayout, lo que permite un mejor control sobre los componentes ¿Cómo debe ser expuesto

2) Decidir sobre qué componente está dispuesto a colocar vertical barra de desplazamiento, ya que está agregando componentes dinámicamente.

Para su requisito actual el siguiente código debería ser suficiente:

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

una vez que se completa el navegador de mostrar el widget no va a hacer que ese componente de nuevo para volver a hacerlo, podemos utilizar contentPanel.layout() o contentPanel.layout (verdadero) vuelve a mostrar los widgets según el nuevo diseño.

Answer 3

Esto sucede porque el evento onRender de topComponent se invoca en esta declaración:

contentPanel.setTopComponent(topContainer); 

Luego, más tarde, va a agregar un componente: topContainer.add(buttonTwo);. Cuando cambia el tamaño de la ventana, se desencadena el evento onRender y aparece el botón que agregó. La solución a su problema consiste en activar el evento onRender para topContainer.

Desafortunadamente, onRender está protegido y por lo tanto no se puede llamar directamente: http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/LayoutContainer.html#onRender%28com.google.gwt.user.client.Element,%20int%29

Usted tendrá que usar fireEvent a desencadenar esta programación en lugar de cambiar el tamaño manualmente la ventana: http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Component.html#fireEvent%28com.extjs.gxt.ui.client.event.EventType%29