ext-学习使用-1-ext下的活动列定制，包括列标头的变化-优快云博客

本文介绍如何使用Ext实现活动列及列头定制功能。通过按钮切换显示不同数据，并动态更改列头文字及列的显示与隐藏状态。

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

目前工作的这个小项目，学习到了ext的内容，为了知识的积累，特开系列博文对ext的应用进行一下总结学习。

本文题目：ext下的活动列定制，包括列标头的变化

关键词： ext 活动列列隐藏列表头列头变化定制

正文：

在项目实现过程中，遇见了使用ext实现活动列，列头定制的需求。遂对这方面的实现进行了相关的搜索和学习，其中给我启示最大的就是在我的收藏当中的一篇博文：《EXT核心API详解(十九)_Ext.grid.Column-Property-ColumnModel/Grid-Grouping-View...》。

需求：

页面上有按钮A，按钮B。单击按钮A，页面显示A对应的数据，C1列的列头变为‘A名称’，C4~C8列显示，C8~C12列隐藏；单击按钮B，页面显示B对应的数据，C1列的列头变为‘B名称’，C4~C8列隐藏，C8~C12列显示。

实现要点：

1.改变C1列的列头文字，也就是列标头文字

首先是js中构建了列：

initComponent : function() {
		this.dataManColm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer() , {
			header : 'A名称',   //C1列
			sortable : true,
			dataIndex : 's1',
			width : 170
		}, 
                                {
			header : '数量',   //C2列
			sortable : true,
			dataIndex : 's1',
			width : 170
		}, 
                                 ......
                                {
			header : '呜呜组啦',   //Cn列
			sortable : true,
			dataIndex : 's1',
			width : 170
		}

这个列的组合的名称就叫做 dataManColm 啦，要改变或者获取它的列对象就非常简单了。改变它的某一列的文字可以用代码： this.dataManColm.setColumnHeader(1,"A名称"); ，这句代码就能实现将这个列组合的从左向右数第一列的header也就是列头、列标头文字设置为‘A名称’，1表示第几列。当然，这句话还能将第一列的列头设置成为‘B名称’。

2.动态显示隐藏列

因为这个功能页面需要对列实现动态的显示功能，而数据库表的结构却不是动态的，所以呢最简单最直接的方式就是将需要显示的列显示出来，不需要显示的列隐藏起来就OK了。

将第4~8列隐藏：

                this.dataManColm.setHidden(4,true);
	this.dataManColm.setHidden(5,true);
	this.dataManColm.setHidden(6,true);
	this.dataManColm.setHidden(7,true);
                this.dataManColm.setHidden(8,true);

同样，将他们设置为不隐藏只需要将true写成false就OK了呵呵

this.dataManColm.setHidden(7,false);

以上正文内容，就是将列实现动态的功能了呵呵，大家还有问题欢迎留言讨论呵呵

elemark

2010年7月14日14:42:35