2

ブラウザのクライアント領域全体を占めるTabPanelを作成し、その中に必要に応じてスクロールするFlexTableを配置したいと思います。しかし、私はこれを達成するのに苦労しています。私はもう試した：

public void onModuleLoad() {
    TabPanel test = new TabPanel();
    test.setSize("100%", "100%");

    FlexTable flex = new FlexTable();
    for (int i = 0; i < 100; i++)
        flex.setText(i, 0, "test " + i);

    test.add(flex, "tab");
    flex.setStyleName("overflow-auto");

    test.selectTab(0);
    RootPanel.get().add(test);
    }

オーバーフロー自動が次のように定義されている場合：

.overflow-auto {
    overflow: auto;
}

タブパネルは適切に100％の幅を占めますが、スクロールバーを強制するのではなく、内部のFlexTableに合わせて高さを調整することになります。タブパネルのクライアント領域を、ここでの子のサイズから独立させるにはどうすればよいですか？

4

5 に答える 5

3

必要な効果を得るには、おそらくそのタブ内でScrollPanelを使用する必要があります。ScrollPanelは、単一のウィジェットを取得し、必要に応じてその上にスクロールバーを配置するコンテナーです。ScrollPanelは、私が知る限り、明示的なサイズの設定に依存していることに注意してください。そうしないと、入力したコンテンツに合わせて正常に拡張されます。

ただし、注意点：TabPanel内のあらゆる種類のスクロール可能なパネルに長年の欠陥がありました。最後に私はそれがまだ開いているのを見ました。

http://code.google.com/p/google-web-toolkit/issues/detail?id=1343

ここで探している解決策は、FlexTableをVerticalPanelなどの他のコンテナパネルに配置し（おそらくSimplePanelで十分です）、それをScrollPanelに配置し、最後にTabPanelに配置することです。

ただし、前述したように、ScrollPanelでは高さを手動で管理する必要があります。したがって、ウィンドウの高さを維持したい場合は、ブラウザのサイズをチェックし、ScrollPanelの高さを計算するコードを作成する必要があります。サイズ変更をキャッチして修正するには、ウィンドウにサイズ変更ハンドラーをアタッチする必要があります。

少なくとも、それは私が今見ているように、ブラウザのスクロールバーを避けている状況です。私が間違っている場合は、誰か、削除するコードがあるので知らせてください...

于 2009-08-12T22:32:14.503 に答える
1

GWT 2.0には、私が望んでいたことを実行する新しいレイアウトシステムがあるようです：http ：//code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

于 2009-12-13T18:18:56.647 に答える
1

私のために働いたのはbikesandcodeが書いたものと似ていました：

  1. FlexPanelを作成する
  2. ScrollPanelを作成し、それにFlexPanelを追加します
  3. ScrollPanelの必要なサイズを設定します（絶対CSS単位を使用）
  4. SimplePanelを作成し、それにScrollPanelを追加します
  5. SimplePanelをTabPanelに追加します
于 2010-02-25T18:47:41.923 に答える
0

問題は、実際には、テーブルをタブの子として設定すると、テーブルが100％の幅/高さに設定されることです。これを行うと、フレックステーブルを（その内容の）100％にすることができるため、overflow-autoは意味がなくなります。

オーバーフローは、ピクセルを使用して幅/高さを設定した場合にのみ機能します。

于 2009-08-10T06:01:18.627 に答える
0

FlexTableの親としてHorizo​​ntalPanel（gxtが提供）を使用し、setAutoHeight（true）メソッドを使用しています。これは正常に機能しています。

于 2016-08-03T18:05:02.243 に答える