在项目有可能赋值给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>