ext3 ext4 gridpanel 列自动撑开

最新推荐文章于 2024-06-19 10:26:38 发布

ajuan1212

最新推荐文章于 2024-06-19 10:26:38 发布

阅读量872

点赞数

分类专栏： extjs javascript 文章标签： flex autoExpandColumn extjs3 extjs4 grid column宽度自动调整

本文链接：https://blog.csdn.net/ajuan1212/article/details/17379359

版权

extjs 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

ext3：通过autoExpandColumn 属性控制，在grid的宽度增加时，该列会自动撑开，其他列不变；

new Ext.grid.GridPanel({
	border : false,
	enableColumnMove : false,
	enableHdMenu : false,
	columns : [new Ext.grid.RowNumberer(), {
		header : '文件名',
		width : 100,
		dataIndex : 'fileName',
		sortable : false,
		fixed : true,
		renderer : this.formatFileName
	}, {
		header : '大小',
		width : 80,
		dataIndex : 'fileSize',
		sortable : false,
		fixed : true,
		renderer : this.formatFileSize,
		align : 'right'
	}, {
		header : '类型',
		width : 60,
		dataIndex : 'fileType',
		sortable : false,
		fixed : true,
		renderer : this.formatIcon,
		align : 'center'
	}, {
		header : '进度',
		width : 100,
		dataIndex : '',
		sortable : false,
		fixed : true,
		renderer : this.formatProgressBar,
		align : 'center'
	}, {
		header : '状态',
		width : 35,
		dataIndex : 'fileState',
		renderer : this.formatState,
		sortable : false,
		fixed : true,
		align : 'center'
	}, {
		header : ' ',
		width : 28,
		dataIndex : 'msg',
		renderer : this.columnTooltip,
		sortable : false,
		fixed : true,
		align : 'left',	
		id : autoExpandColumnId
	}],
	autoExpandColumn : autoExpandColumnId,
	ds : new Ext.data.SimpleStore({
		fields : ['fileId', 'fileName', 'fileSize', 'fileType', 'fileState', 'msg']
	})
});

ext4: gridpanel添加属性forcefit: true，同时固定不变的列用width固定宽度，自动撑开列用属性flex: 1即可；如果每一列都用属性flex去划分，既可以随grid的宽度变化各列自动调整。