日期:2014-05-16  浏览次数:20573 次

Ext3.0中复杂表头例子

注意要点:不出现滚动条时要设置height和forceFit : false

效果如下图:


	this.columns = [{
				header : '月份',
				dataIndex : '月份',
				width:50
			}];

	 this.store = new Ext.data.SimpleStore({
	 fields : [],
	 data : [[]]
	 });

	var cc = new Ext.FormPanel({
				frame : false,
				border : false,
				items : [{
							xtype : 'grid',
							border : false,
							height:420,
							store : this.store,
							colModel : new Ext.grid.ColumnModel({
										columns : this.columns,
										defaultSortable : true,
										rows : [[{},
										         {
													header : '',
													colspan : 9,
													align : 'center'
										         },{
													header : '',
													colspan : 9,
													align : 'center'
										         },{
													header : '',
													colspan : 9,
													align : 'center'
										         }],
										         [{}, {
													header : '',
													colspan : 2,
													align : 'center'
												}, {
													header : '',
													colspan :2,
													align : 'center'
												}, {
													header : '',
													colspan : 4,
													align : 'center'
												},{}, {
													header : '',
													colspan : 2,
													align : 'center'
												}, {
													header : '',
													colspan :2,
													align : 'center'
												}, {
													header : '',
													colspan : 4,
													align : 'center'
												},{}, {
													header : '',
													colspan : 2,
													align : 'center'
												}, {
													header : '',
													colspan :2,
													align : 'center'
												}, {
													header : '',
													colspan : 4,
													align : 'center'
												},{}]]
									}),
							enableColumnMove : false,
							viewConfig : {
								forceFit : false
							},
							plugins : [new Ext.tet.plugins.GroupHeaderGrid()]
						}]
			});