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();  
      }  
    });