datagrid 显示全部表头文字(DataGrid show header fullly)

在项目有可能赋值给datagrid后,发现表头不能够全部显示出来,特别是column比较多的时候,但是又不能初始值就设置好每个column的宽度,怎么办呢?

1.首先拿到每个headerItem的style(字体,颜色,大小等),然后依据这些东西算出标题的宽度。

2.把给个宽度加起来,跟datagrid的宽度相比,如果大于datagrid的宽度,那么就把它赋给datagrid的宽度。

3.遍历每一列,给每一列(AdvancedDataGridColumn)的宽度赋值headerItem的宽度。

4.大功告成!

 

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ICollectionView;
			import mx.controls.Label;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
			import mx.controls.advancedDataGridClasses.SortInfo;
			import mx.core.FlexGlobals;
			import mx.core.UITextField;
			import mx.core.UITextFormat;
			import mx.core.mx_internal;
			
			[Bindable]
			private var dpFlatOne:ArrayCollection = new ArrayCollection([
				{Region:"Southwest1", Territory:"Arizona1",Territory_Rep:"BTerritory_Rep1", Actual:3, Estimate:40000}, 
				{Region:"Southwest2", Territory:"Arizona2",Territory_Rep:"Territory_Rep2", Actual:29885, Estimate:30000},  
				{Region:"Southwest3", Territory:"Central3",Territory_Rep:"Territory_Rep3", Actual:29134, Estimate:30000},  
				{Region:"Southwest4", Territory:"Nevada4",Territory_Rep:"Territory_Rep4", Actual:1, Estimate:45000},  
				{Region:"Southwest5", Territory:"Northern5",Territory_Rep:"Territory_Rep5", Actual:38805, Estimate:40000}, 
				{Region:"Southwest6", Territory:"Northern6",Territory_Rep:"Territory_Rep6", Actual:55498, Estimate:40000},  
				{Region:"Southwest7", Territory:"Southern7",Territory_Rep:"Territory_Rep7", Actual:44985, Estimate:45000}, 
				{Region:"Southwest8", Territory:"Southern8",Territory_Rep:"Territory_Rep8", Actual:1, Estimate:45000}
			]);
			
			protected function AdjustColumnclickHandler(event:MouseEvent):void
			{
				 var maxDataGridLength:Number = 0;
				 for each(var item:Array in firstDatagrid.headerItems)
				{
					for(var i:int = 0;i < item.length ; i++)
					{
						var test1:UITextField = item[i].mx_internal::getLabel();
						var text:String = (firstDatagrid.columns[i] as AdvancedDataGridColumn).headerText; 
						var test:Number = measureTextWidth(text,test1.getStyle("fontSize") as Number,test1.getStyle("fontFamily") as String);
						maxDataGridLength += (test  + 20);
					}
				}
				
				 if (!isNaN(firstDatagrid.width) && maxDataGridLength > firstDatagrid.width)
				{
					firstDatagrid.width = Math.round(maxDataGridLength);
				}
				callLater(resizeColumnWidth);
			}
			
			private function resizeColumnWidth():void
			{
				for each(var item:Array in firstDatagrid.headerItems)
				{
					for(var i:int = 0;i < item.length ; i++)
					{
						var test1:UITextField = item[i].mx_internal::getLabel();
						var text:String = (firstDatagrid.columns[i] as AdvancedDataGridColumn).headerText; 
						var test:Number = measureTextWidth(text,test1.getStyle("fontSize") as Number,test1.getStyle("fontFamily") as String);
						(firstDatagrid.columns[i] as AdvancedDataGridColumn).width = test  + 20;
					}
				}
				firstDatagrid.validateNow();
			}
			
			public static function measureTextWidth( text:String ,fontSize:Number,fontFamily:String):Number 
			{
				var uiTextFormat:UITextFormat = new  UITextFormat(FlexGlobals.topLevelApplication.systemManager);
				uiTextFormat.antiAliasType="advanced"; //这两个参数不设置会抛错
				uiTextFormat.gridFitType="pixel";
				// 不设置字体会计算的不对
				uiTextFormat.font=fontFamily;//默认字体	
				uiTextFormat.size= fontSize;  //可以设置字体大小
				return uiTextFormat.measureText(text).width;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:AdvancedDataGrid id="firstDatagrid"
						 sortableColumns="true"
						 sortExpertMode="true"
						 width="600" height="100%" 
						 dataProvider="{dpFlatOne}">        
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region" itemRenderer="mx.controls.Label"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
									   showDataTips="true"
									   headerText="Territory_Rep" itemRenderer="mx.controls.Label"/>
			<mx:AdvancedDataGridColumn dataField="Actual" headerText="asdfadsfasdfasafsdf" dataTipField="Actual" showDataTips="true"/>
			<mx:AdvancedDataGridColumn dataField="Estimate" headerText="asdddddddddddddddddddddddf"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<s:Button label="Adjust the column width" click="AdjustColumnclickHandler(event)"/>
</s:Group>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值