GridPanel合并表头

GridPanel合并表头

注意：一定要引入插件的js文件

<script type="text/javascript" src="../js/ext/GroupHeaderPlugin.js"></script>

1.启动Extjs并布局：

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = '../js/ext/resources/images/default/s.gif';
 	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.QuickTips.init();
	var viewPort = new Ext.Viewport({
		layout:"fit", //布局方式为充满界面
		items:[myTab]
	});
});

 

2.创建TabPanel：

var myTab = new Ext.TabPanel({
	id:"myTab",
	activeTab:0,
	enableTabScroll:true,
	layoutOnTabChange:true,
	items:[{
		layout:"fit",    //布局
		title:"合并表头示例",
		items:myGrid
	}]
});

 

3.创建Store：

var myStore = new Ext.data.JsonStore({
	data:[  
        {id:1,name:"张三",age:22,school:"第一中学",grade:"高一"},  
        {id:2,name:"李四",age:23,school:"第一中学",grade:"高二"},  
        {id:3,name:"王五",age:24,school:"第一中学",grade:"高三"}  
    ],  
    fields:["id","name","age","school","grade"]  //注意：5个字段
});

 

4.创建ColumnModel：

var myColumn = new Ext.grid.ColumnModel({
	defaultSortable:false,
	columns:[
		{
			header:"编号",
			dataIndex:"id"
		},{
			header:"姓名",
			dataIndex:"name"
		},{
			header:"年龄",
			dataIndex:"age"
		},{
			header:"学校",
			dataIndex:"school"
		},{
			header:"年级",
			dataIndex:"grade"
		}
	],
	rows:[
			[
		  		{},{},{},{header: '教育情况', colspan: 2, align: 'center'}
		 	]
		 ]        //此处为合并表头的地方——注意前面有3个空的｛｝
});

注意：

1.需要在columnModel中加入rows属性。

2.有几个没有合并在表头中就有几个空的｛｝。

3.有多少个被合并，colspan就为多少！

 

5.创建GridPanel：

var myGrid = new Ext.grid.GridPanel({
	cm:myColumn,
	ds:myStore,
	layout:"fit",
	stripeRows:true,
	plugins: [new Ext.ux.plugins.GroupHeaderGrid()],   //合并表头的插件
	loadMask:{msg:'正在加载数据，请稍侯……'},
	tbar:[
		{
			text:"保存",
			iconCls:"save"
		},{
			text:"增加行",
			iconCls:"add"
		},{
			text:"删除行",
			iconCls:"remove"
		}
	]
});

注意：

1.需要在GridPanel中放入合并表头的插件！

 

图示：