Ext-GWT/GXT

Question

我已經在Ext-GWT論壇上發佈了這個問題，我只是希望這裏的某個人可能對我有一個答案！

我在努力做一些事情我最初以爲很簡單，但我開始相信是不可能的...

我有各種各樣的「佈局模板」 - 簡單地由幾個GWT DockLayoutPanel的範圍內相互最後在LayoutPanels中結束。 GWT的LayoutPanel被設計用於調整添加到它的完整大小的小部件（或複合），並且完全用純GWT小部件來完成。

我的「佈局模板」的想法是，我不知道內部LayoutPanel的EXACT高度和寬度，因爲我可以在實例化此模板時以不同方式設置某些面板大小（外部DockLayoutPanels）。我希望將一個Grid組件添加到最內層的LayoutPanel中，並使其尺寸本身（高度和寬度）適合普通的GWT小部件（例如與GWT標籤完美配合）。

我是GXT的新手（正如我在今天早些時候開始使用它的），我意識到GXT的構建方式與GWT在DOM上構建它的Widget的方式不同。

無論如何要達到預期的效果嗎？我曾嘗試將網格添加到具有FitLayout佈局的ContentPanel中，我嘗試過AnchorLayout，我試圖直接添加網格......沒有任何工作似乎......任何建議或甚至推向正確的方向都會很大不勝感激！

提前致謝！

Xandel

Answer 1

只是對這個職位和我所採取的方向音符。當我開始我的GWT項目時，我正在學習基礎知識並閱讀其他人的帖子，關注和建議，我最初忽略的一點建議非常簡單 - 使用GWT框架時僅使用純粹的100％GWT組件。

我最初忽略了開發人員的這些公正警告，因爲在開源工具和開源項目的時代，人們開發了一套思維套裝「而不是構建一個能夠給我某些功能的工具，讓我更願意看到如果其他人已經做到了「。這種思維模式加快了開發速度，幾乎實現了項目和實施方法的標準化。

但是，我發現在過去的兩個月裏，使用GWT時最好不要遵循這個原則。也許是因爲它沒有像其他框架那樣廣泛傳播，或者需要一種非常特定的編碼風格，但是我對搜索（簡單，可排序，JSON可加載）網格組件和（驗證，整齊風格）的表單組件一無所知沒有噩夢。

這不是因爲它們不存在。他們是這樣。我試過ext-gwt，gwt-ext，gwt-mosaic和gwt-incubator。這是因爲很多組件都脫離了GWT提供的非常簡單的佈局基礎（換句話說，您放置窗口小部件的面板大多需要是隨工具一起提供的面板）。這反過來又使混合成分和獲得所需的結果幾乎不可能。這反過來又擺脫了讓我發現一種有用的組件思維。

只是一個有趣的最後一點，我認爲這可能值得一提。所以，由於我對上述觀點的認識，我着手編寫自己的網格和表單組件。我已經完成並且對我工作得很好（顯然，因爲我寫了他們，我不認爲他們會對其他人有用）。但是在編寫網格組件的過程中，需要列自動調整大小並在其父面板中繪製空間時，我發現直到最後繪製才知道面板的最終寬度（這種情況經常會發生很長時間你的代碼執行）。具有諷刺意味的是，我開始着手構建一組面板，這些面板從父面板（最終需要了解其大小）直到最內面的面板，從而當我的網格組件最終繪製完成時，我可以相互通信觸發一個名爲onSizeKnown（int width，int height）的方法並執行所需的大小調整。

在我完成這個之後，我只能笑出聲來。因爲突然間我明白爲什麼所有其他GWT組件都需要自己的面板。我實質上也必須這樣做才能得到我需要的工作。簡而言之，如果你是一個像我一樣的新手GWT開發者，他們正在尋找很酷的東西來讓你的項目看起來很棒 - 這是我的建議 - 如果你打算使用外部框架如上面提到的一些 - 只使用該框架。不要將其組件與其他框架混用。學會愛這個框架，並使用他們的面板和設計方法從頭開始構建您的項目。如果這讓你感到恐慌，並且讓你感到緊張和有限，那麼請做我所做的並使用純香草GWT組件編寫自己的作品。按照此建議，您將長期節省大量時間。

Xandel

Answer 2

• 該解決方案是GXT 2.2.0和2.0.4 GWT *

雖然原來的海報已又跳槽最近，我遇到了這個問題，我想我會發布我的解決方案，以防其他人絆倒在這。

沒有理由不能將GXT Grid直接添加到GWT LayoutPanel。問題是這兩個庫的造型/定位方式有衝突。基本上歸結爲網格的大小基於其父節點的高度屬性，該屬性未設置意味着網格的主體被賦予高度0並且網格本身獲得與網格頭部的高度相等的高度（如果當下）。

因此，解決方案是撤銷GXT在流回傳給GWT時的做法。這裏是一個模板解決方案：

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電網的結構定義在那裏，你可以找到它在GXT JAR模板文件下的COM/ExtJS的/ GXT/UI /客戶端/widget/grid/GridTemplates#master.html

• 查看com.extjs.gxt.ui.client.widget.grid.GridView＃renderUI（）以瞭解如何構建網格。