Comment diviser un panneau en EXT-GWT?

Question

J'utilise ext-gwt et ne peux pas comprendre comment diviser un panneau de façon à avoir 2 widgets, un de chaque côté du séparateur redimensionnable, avec une hauteur de 100% et une largeur variable.

Essentiellement, ce que je veux est quelque chose comme:

----------------------------------------- 
| Widget1   | Widget2   | 
|     |     | 
|     |     | 
|     |     | 
|     |     | 
|    <-|->     | 
|     |     | 
|     |     | 
|     |     | 
|     |     | 
----------------------------------------- 

Je l'ai essayé avec BorderLayout, mais je pense que je le faisais mal et ça ne marcherait pas (la hauteur verticale des widgets wouldn » t prendre le plein écran). Quelqu'un peut-il aider? Voici la dernière forme de ce que j'ai essayé:

public void onModuleLoad() { 
    Viewport v = new Viewport(); 
    v.setLayout(new RowLayout(Orientation.HORIZONTAL)); 

    ContentPanel panel1 = new ContentPanel(); 
    panel1.setHeading("Panel 1"); 

    ContentPanel panel2 = new ContentPanel(); 
    panel2.setHeading("Panel 2"); 

    v.add(panel1, new RowData(.3, 1)); 
    v.add(new SplitBar(LayoutRegion.EAST, panel1)); 
    v.add(panel2, new RowData(.7, 50)); 

    RootPanel.get().add(v); 
} 

Merci!

Answer 1

Assez simple vraiment. Assurez-vous d'abord que votre Viewport dispose d'une mise en forme adaptée. Ensuite, vous pouvez utiliser une disposition de bordure comme suit pour vous scinder. Ajoutez ce panneau à votre fenêtre d'affichage dans votre exemple. (Préférez les mises en page de bordure au séparateur juste au cas où je voudrais plus de zones plus tard) Ensuite, ajoutez simplement vos données/widgets/panneaux aux deux panneaux de contenu.

package com.gerharddavids.example; 

import com.extjs.gxt.ui.client.Style.LayoutRegion; 
import com.extjs.gxt.ui.client.util.Margins; 
import com.extjs.gxt.ui.client.widget.ContentPanel; 
import com.extjs.gxt.ui.client.widget.LayoutContainer; 
import com.extjs.gxt.ui.client.widget.layout.BorderLayout; 
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData; 
import com.google.gwt.user.client.Element; 

public class BorderLayoutExample extends LayoutContainer { 

    protected void onRender(Element target, int index) { 
    super.onRender(target, index); 
    final BorderLayout layout = new BorderLayout(); 
    setLayout(layout); 
    setStyleAttribute("padding", "10px"); 

    ContentPanel west = new ContentPanel(); 
    ContentPanel center = new ContentPanel(); 

    //uncomment this section if you dont want to see headers 
    /* 
    * west.setHeaderVisible(false); 
    * center.setHeaderVisible(false); 
    */ 

    BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150); 
    westData.setSplit(true); 
    westData.setCollapsible(true); 
    westData.setMargins(new Margins(0,5,0,0)); 

    BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER); 
    centerData.setMargins(new Margins(0)); 

    add(west, westData); 
    add(center, centerData); 
    } 
}