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

目前工作的这个小项目，学习到了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