GXT組件使用教程2——Auto Height Grid

文章以EXT-GWT的examples爲綱要，在EXT-GWT例子中提供了91種例子.

 

此係列不是從新建一個項目開始。學習此教程的人應該有能力通過查資料完成GWT同EXT結合並構建項目。

 

界面截圖：

點擊 Add Plant 之後截圖

表格的寬度自動增加了。

查看源代碼：

編寫設置高度方法

protected void doAutoHeight() {  
    if (grid.isViewReady()) {  
      grid.getView().getScroller().setStyleAttribute("overflowY", "hidden");  
      // 重新設置放置grid的panel的高度。這些高度是由以下幾個高度的和組成的
      // 先判斷是否有 橫向滾動條，有就加19 像素
      // 加上 表頭高度，加上之前面板高度，
      // 加上列名高度，加上新增行高度，得出新的panel高  
      cp.setHeight((grid.getView().getBody().isScrollableX() ? 19 : 0) + grid.el().getFrameWidth("tb")  
          + grid.getView().getHeader().getHeight() + cp.getFrameHeight()  
          + grid.getView().getBody().firstChild().getHeight());  
    }  
  }

 

 調用方法。調用方法是給表格，表格的store,表格的column加事件監聽。當表內數據有變化時進行調用設置高度方法

 

// 當表格重繪時 
grid.addListener(Events.ViewReady, new Listener<ComponentEvent>() {  
      public void handleEvent(ComponentEvent be) {  
// 當數據增加時
        grid.getStore().addListener(Store.Add, new Listener<StoreEvent<Plant>>() {  
          public void handleEvent(StoreEvent<Plant> be) {  
            doAutoHeight();  
          }  
        });  
        doAutoHeight();  
      }  
    });
  
//列大小變化可導致水平滾動條的顯示和隱藏，當滾動條顯示時容器也要變高
    grid.addListener(Events.ColumnResize, new Listener<ComponentEvent>() {  
      public void handleEvent(ComponentEvent be) {  
        doAutoHeight();  
      }  
    });
  
// Fires when a column is hidden or "unhidden"
    grid.getColumnModel().addListener(Events.HiddenChange, new Listener<ColumnModelEvent>() {  
      public void handleEvent(ColumnModelEvent be) {  
        doAutoHeight();  
      }  
    });