GXT组件应用教程3——Column Group

2012-11-04

GXT组件使用教程3——Column Group?文章以EXT-GWT的examples为纲要，在EXT-GWT例子中提供了91种例子，此系列不

GXT组件使用教程3——Column Group

文章以EXT-GWT的examples为纲要，在EXT-GWT例子中提供了91种例子，

此系列不是从新建一个项目开始。学习此教程的人应该有能力通过查资料完成GWT同EXT结合并构建项目。

今天和大家讨论的是复杂表头的一种，Column Group，首先来看截图：

GXT组件应用教程3——Column Group

表头是控件的：

GXT组件应用教程3——Column Group
?实现column group 主要通过两步，

第一步：声明HeaderGroupConfig

// 创建column groupHeaderGroupConfig 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");

热点排行

Web前端

GXT组件应用教程3——Column Group