2012-02-13 9 views
1

GWTでは、グリッドのボタンでFlexTableを取得しようとしています。そのため、ボタンの1つをクリックすると何か起こることがあります。私は、ブラウザで結果を見たときしかし、私は次を得る:GWTフローテーブルの塗りつぶしセル

+-+-+ +-+ 
|a|b| |c| 
+-+-+ +-+ 
    |e|  
+-+-+-+-+-+ 
|d|h|i|f|g| 
+-+-+-+-+-+ 
    |j|  
    +-+  
    |k| 
    +-+ 

私がしたいことは、このあるのに対し:

+-+---+---+ 
|a| b | c | 
+-+---+-+-+ 
| | e | | | 
| +-+-+ | | 
| |h|i|f|g| 
|d+-+-+ | | 
| | j | | | 
| +---+-+-+ 
| | k | 
+-+-------+ 

私はAPIで推奨されているようにtable.getFlexCellFormatter().setColSpan(row, col, span)を使用してみましたが、この上記の最初の結果につながった。私はどのように進むべきであるかについてのアイデア?

@Stefan:表のセルにCOLSPANとROWSPANを設定

public MyPanel() { 
    Button b; 
    FlexTable ft = new FlexTable(); 
    ClickHandler click = new ClickHandler() { 
     @Override 
     public void onClick() { 
      // do something here with the button that was clicked 
     } 
    } 
    b = new Button("a"); 
    b.addClickHandler(click); 
    ft.setWidget(0, 0, b); 
    // do the same for button "b" at (0,1), "c" at (0,3), "d" at (1,0), "e" at (1,1), 
    // "f" at (1,3), "g" at (1,4), "h" at (2,1), "i" at (2,2), "j" at (3,1), "k" at (4,1) 
    ft.getFlexCellFormatter().setColSpan(0, 1, 2); 
    ft.getFlexCellFormatter().setColSpan(0, 3, 2); 
    ft.getFlexCellFormatter().setRowSpan(1, 0, 4); 
    ft.getFlexCellFormatter().setColSpan(1, 1, 2); 
    ft.getFlexCellFormatter().setRowSpan(1, 3, 3); 
    ft.getFlexCellFormatter().setRowSpan(1, 4, 3); 
    ft.getFlexCellFormatter().setColSpan(3, 1, 2); 
    ft.getFlexCellFormatter().setColSpan(4, 1, 4); 
} 
+0

あなたが提供することができますそれはあなたが生成されるHTMLを考慮すれば、物事をこのように見るために役立つかもしれませんあなたのコード? – Stefan

答えて

2

は、隣接するセルのインデックスを変更しない私のコードは、それだけで邪魔にそれらを突きつけています。我々が使用

+-+-+ 
|a|b| 
| |-+ 
|a|c| 
+-+-+ 

ft.setWidget(0, 0, a); 
ft.setWidget(0, 1, b); 
ft.setWidget(1, 0, c); // !!! 
ft.getFlexCellFormatter().setRowSpan(0,0,2); 

参照ウィジェットcが最初の行に属する最初のセルである。例えば、このテーブルを達成します。

<table> 
    <tr> 
    <td rolspan="2">a</td><td>b</td> 
    </tr><tr> 
    <td>c</td> 
    </tr> 
</table> 

あなたのセルインデックス、すべてを調整するには、あなたがそれらを望むように並べる必要があります:

ft.setWidget(0, 0, a); 
ft.setWidget(0, 1, b); 
ft.setWidget(0, 2, c); 
ft.setWidget(1, 0, d); 
ft.setWidget(1, 1, e); 
ft.setWidget(1, 2, f); 
ft.setWidget(1, 3, g); 
ft.setWidget(2, 0, h); 
ft.setWidget(2, 1, i); 
ft.setWidget(3, 0, j); 
ft.setWidget(4, 0, k); 
ft.getFlexCellFormatter().setColSpan(0, 1, 2); 
ft.getFlexCellFormatter().setColSpan(0, 2, 2); 
ft.getFlexCellFormatter().setRowSpan(1, 0, 4); 
ft.getFlexCellFormatter().setColSpan(1, 1, 2); 
ft.getFlexCellFormatter().setRowSpan(1, 2, 3); 
ft.getFlexCellFormatter().setRowSpan(1, 3, 3); 
ft.getFlexCellFormatter().setColSpan(3, 0, 2); 
ft.getFlexCellFormatter().setColSpan(4, 0, 4); 
+0

これは問題を部分的に解決しますが、ボタンを押して**完全に**セルを埋める問題を解決しません。 – user1207177

+0

上記のように、例えば、 "e"ボタンは、 "h"と "i"ボタンを組み合わせた幅にしたいと考えています。 – user1207177

+0

これはスタイルの問題です。ボタンの幅と高さを '100%'に設定すると、コンテナが完全に埋められます。 –

関連する問題