文章以EXT-GWT的examples为纲要,在EXT-GWT例子中提供了91种例子,
此系列不是从新建一个项目开始。学习此教程的人应该有能力通过查资料完成GWT同EXT结合并构建项目。
今天和大家讨论的是复杂表头的一种,Column Group,首先来看截图:
表头是控件的:
实现column group 主要通过两步,
第一步:声明HeaderGroupConfig
// 创建column group
HeaderGroupConfig headerGroupConfig4 = new HeaderGroupConfig("我是四列的头", 1, 4);
// 第一个参数是表头名称,第二个参数是扩展几行,第三个参数是扩展几列
HeaderGroupConfig headerGroupConfig3 = new HeaderGroupConfig("我是三列的头", 1, 3);
HeaderGroupConfig headerGroupConfig2 = new HeaderGroupConfig("我是二列的头", 1, 2);
第二步:在ColumnModel上添加HeaderGroup
// 将列添加到表头
cm.addHeaderGroup(0, 0, headerGroupConfig4);
cm.addHeaderGroup(1, 0, headerGroupConfig3);
cm.addHeaderGroup(2, 0, headerGroupConfig2);
第一个参数是开始行,第二个参数是开始列。
其实在表头添加控件也是非常简单就可以实现,例如:
ColumnConfig column = new ColumnConfig("date", 125);
Button btn = new Button("Updated");
btn.addListener(Events.OnClick, new Listener<ButtonEvent>() {
public void handleEvent(ButtonEvent be) {
// stop column from getting click and causing sort
be.cancelBubble();
}
});
// 设置组件的css属性
btn.setStyleAttribute("float", "left");
// 声明组件后set到 ColumnConfig 上就可以了
column.setWidget(btn, "Last Updated");