3

Ext-GWT フォーラムにこの質問を投稿しました。誰かが私に答えてくれることを願っています!

最初は簡単だと思っていたのに、不可能だと思い始めていることを実行するのに苦労しています...

私はある種の「レイアウトテンプレート」を持っています - 単純にいくつかの GWT DockLayoutPanel が互いに含まれており、最終的に LayoutPanels で終わっています。GWT の LayoutPanel は、追加されたウィジェット (またはコンポジット) のサイズをフル サイズに調整するように設計されており、純粋な GWT ウィジェットと完全に一致します。

私の「レイアウト テンプレート」の考え方は、このテンプレートをインスタンス化するときに特定のパネル サイズ (外側の DockLayoutPanels) を異なる方法で設定する可能性があるため、非常に内側の LayoutPanel の正確な高さと幅がわからないということです。私が望むのは、最も内側の LayoutPanels の 1 つに Grid コンポーネントを追加し、それ自体のサイズ (高さと幅) を通常の GWT ウィジェットと同じように調整することです (たとえば、GWT ラベルで完全に機能します)。

私は GXT に非常に慣れていないので (今日から使い始めました)、GXT がそのコンポーネントを構築する方法と、GWT が DOM でウィジェットを構築する方法とは異なることに気付きました。

とにかく望ましい結果を達成する方法はありますか? FitLayout のレイアウトを使用して ContentPanel にグリッドを追加しようとしました。AnchorLayout を試しました。グリッドを直接追加しようとしました...何も機能していないようです...アドバイスや正しい方向へのプッシュさえも大いに役立ちます感謝！

前もって感謝します！

ザンデル

4

2 に答える 2

11

この投稿と私がとった方向性についてのメモです。GWT プロジェクトを開始し、基本を学び、他の投稿や懸念事項、アドバイスを読んでいたとき、最初に見落としていたアドバイスは非常に単純でした。GWT フレームワークを使用する場合は、純粋な 100% GWT コンポーネントのみを使用してください。

オープン ソース ツールやオープン ソース プロジェクトの時代には、「特定の機能を提供するツールを構築する代わりに、他の誰かが持っているかどうかを見てみましょう。もうやった」。この考え方は開発をスピードアップし、プロジェクトと実装方法をほぼ標準化します。

しかし、この 2 か月間で、GWT を使用する場合は、この原則に従わないことが最善であることがわかりました。おそらく、他のフレームワークほど広く普及していないか、非常に特定のタイプのコーディング スタイルが必要なためですが、(単純で、並べ替え可能で、JSON で読み込み可能な) グリッド コンポーネントと (検証し、適切にスタイル設定された) フォーム コンポーネントを探しても何もありませんでした。悪夢に近い。

これは、それらが存在しないからではありません。彼らはそうします。ext-gwt、gwt-ext、gwt-mosaic、gwt-incubator を試しました。これは、コンポーネントの多くが、GWT が提供する非常に単純なレイアウト基盤から離れているためです (つまり、ウィジェットを配置するパネルは、ほとんどの場合、ツールで提供されるパネルである必要があります)。これにより、コンポーネントを混合して目的の結果を得ることがほぼ不可能になります。これにより、便利なコンポーネントを見つけてもらうという考え方から脱却できます。

言及する価値があると思われる興味深い最後のポイントです。上記の点を認識したため、独自のグリッドおよびフォーム コンポーネントを記述し始めました。私が完成させ、私のためにうまく働いています（明らかに、私が書いたので、他の人に役立つとは思いません）。しかし、グリッドコンポーネントを作成する過程で、親パネルに描画された列のサイズと間隔を自動的に調整する必要があるため、最終的に描画されるまでパネルの最終的な幅がわからないことがわかりました(これは結局のところ長い間起こります)コードが実行されます)。皮肉なことに、私は互いに通信する一連のパネルの構築に着手しました。

これをやり終えた後は、笑うことしかできませんでした。他のすべての GWT コンポーネントが独自のパネルを必要とする理由が突然明らかになったからです。私は本質的に、必要なものを機能させるために同じことをしなければなりませんでした。

要するに、あなたが私のような初心者の GWT 開発者であり、プロジェクトの見栄えを良くするためのクールなものを探している場合 (現在もそうですか?)、これは私のアドバイスです。上記 - そのフレームワークのみを使用してください。そのコンポーネントを他のフレームワークと混ぜないでください。そのフレームワークを愛し、パネルとデザイン方法を使用してプロジェクトをボトムアップで構築することを学びましょう。これがあなたを怖がらせ、緊張し、限界を感じさせるなら、私がしたことをして、純粋なバニラ GWT コンポーネントを使用して独自のものを書いてください。このアドバイスに従うことで、長期的には多くの時間を節約できます。

ザンデル

于 2010-05-21T12:29:41.547 に答える
2
  • このソリューションは、GXT 2.2.0 および GWT 2.0.4 用です *

元のポスターはその後移動しましたが、私は最近この問題に遭遇し、他の誰かがこれに遭遇した場合に備えて私の解決策を投稿すると考えました.

GXT Grid を GWT LayoutPanel に直接追加できない理由はありません。問題は、2 つのライブラリのスタイル/ポジショニング アプローチが競合していることです。基本的には、グリッドのサイズがその親の高さ属性に基づいて設定されているという事実に要約されます。これは設定されていないため、グリッドの本体には高さが 0 が割り当てられ、グリッド自体にはグリッド ヘッダーと同じ高さが割り当てられます (現在）。

したがって、解決策は、フローが GWT に戻ったときに GXT が行うことを元に戻すことです。テンプレートソリューションは次のとおりです。

class MyGridWrapper extends Composite {

  private LayoutPanel widget;
  private Grid<?> grid;

  public MyGridWrapper(Grid<? extends ModelData> grid) {
    this.grid = grid;

    widget = new LayoutPanel();
    initWidget(widget);

    widget.add(grid);
    // Set the grid's vertical and horizontal constraints

    // ... populate the rest of the panel
  }

  @Override
  protected void onLoad() {
    // onLoad is called after GXT is finished so we can do what we need to

    // Redo what the LayoutPanel did originally
    grid.el().setStyleAttribute("position", "absolute");
    grid.el().setStyleAttribute("top", "0");
    grid.el().setStyleAttribute("bottom", "0");
    grid.el().setStyleAttribute("left", "0");
    grid.el().setStyleAttribute("right", "0");

    // Undo any height settings on the .x-grid3 element
    El mainWrap = grid.el().firstChild();
    assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName();
    mainWrap.setStyleAttribute("height", "auto");

    // Undo any height settings on the .x-grid3-scroller element
    El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN!
    assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName();
    scroller.setStyleAttribute("height", "auto");
  }
}

アサーションは、明らかに非常に壊れやすいコードから保護するのに役立つため、これが巨大な、巨大なハックであることに注意してください。

--

  • GXT グリッドの構造がどこで定義されているか知りたい場合は、com/extjs/gxt/ui/client/widget/grid/GridTemplates#master.html の下にある GXT JAR のテンプレート ファイルで見つけることができます。

  • com.extjs.gxt.ui.client.widget.grid.GridView#renderUI() を見て、グリッドがどのように構築されているかを理解してください。

于 2010-11-18T19:33:50.023 に答える