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

 

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