2012-02-13 3 views
1

GWT에서 단추 중 하나를 클릭하면 뭔가 일어날 수 있도록 표에있는 단추가있는 FlexTable을 얻으려고합니다.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이 : 내 코드

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

당신이 제공 할 수 있습니다 당신의 코드? – Stefan

답변

2

인접 셀 인덱스를 변경하지 않는 테이블 셀의 열 병합 및 ROWSPAN 설정, 그것은 다만 방법 그들을 밖으로 밀 친다. 우리가 사용하는

+-+-+ 
|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는 첫 번째 행에 속하는 첫 번째 셀에 예를 들어,이 표를 달성하기 위해. 그것은 당신이 생성 될 HTML을 고려하는 경우 물건이 방법을보고 도움이 될 수

<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

위와 같이 "예"버튼은 "h"와 "i"버튼이 결합 된만큼 넓어지기를 바랍니다. – user1207177

+0

그건 스타일의 문제입니다. 버튼 너비와 높이를'100 %'로 설정하면 컨테이너가 완전히 채워집니다. –