4

私はext-gwtを使用していますが、サイズ変更可能なスプリッターの両側に 1 つずつ、2 つのウィジェットがあり、両方のウィジェットの高さが 100% で、幅が可変になるようにパネルを分割する方法がわかりません。

本質的に、私が欲しいのは次のようなものです：

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

BorderLayout で試してみましたが、やり方が間違っていてうまくいかなかったと思います (ウィジェットの垂直方向の高さが全画面を占有しません)。誰でも助けてもらえますか？これが私が試した最新の形式です：

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

ありがとう！

4

1 に答える 1

4

とてもシンプルです。まず、Viewport のレイアウトが適切であることを確認します。次に、次のような境界線レイアウトを使用して分割できます。このパネルを例のビューポートに追加します。(後でより多くの領域が必要になる場合に備えて、境界レイアウトを分割することをお勧めします) 次に、データ/ウィジェット/パネルを 2 つのコンテンツ パネルに追加します。

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);  
  }  
}
于 2010-10-06T06:31:20.667 に答える