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