如何在EXT-GWT中拆分面板？ [英] How to split a panel in EXT-GWT?

问题描述

我正在使用 ext-gwt ，无法弄清楚如何拆分这样我就有了两个小部件，一个在可调整大小的分离器的两边，两个小部件的高度都是100％，宽度是可变的。

I'm using ext-gwt and can't figure out how to split a panel so that I have 2 widgets, one on each side of the resizeable splitter, with the height of both widgets being 100% and their widths being variable.

从本质上讲，我想要的是这样的：

In essence, what I want is something like:

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

我试过用BorderLayout，但我认为我做错了，它不会工作（垂直高度小部件不会占用整个屏幕）。任何人都可以帮忙吗？这是我尝试过的最新形式：

I tried it with BorderLayout, but I think I was doing it wrong and it wouldn't work (the vertical height of the widgets wouldn't take up the full screen). Can anyone help out? Here's the latest form of what I've tried:

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

谢谢！

Thanks!

推荐答案

真的很简单。
首先确保您的视口具有合适的布局。
然后你可以使用如下的边界布局来分割。在您的示例中将此面板添加到您的视口。
（为了防止以后需要更多区域，请选择边框布局）
然后，只需将您的数据/小部件/面板添加到两个内容面板中即可。

Pretty simple really. First ensure that your Viewport has a fit layout. Then you can use a border layout like follows for you split. Add this panel to your viewport in your example. (Prefer border layouts to splitter just in case I want more areas later on) Then just add your data/widgets/panels to the two content panels.

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

这篇关于如何在EXT-GWT中拆分面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！