Ext3.0中复杂表头样例

最新推荐文章于 2017-08-11 16:50:38 发布

转载最新推荐文章于 2017-08-11 16:50:38 发布 · 267 阅读

文章标签：

#php

本文介绍如何在ExtJS中设置网格布局，确保不出现滚动条的同时保持良好的视觉效果。通过详细配置FormPanel、ColumnModel等组件，实现固定高度且各列自适应宽度的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意要点：不出现滚动栏时要设置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()]
						}]
			});