Flex: 按比例设置DataGird的列宽

Flex里面，DataGrid的column的width属性不接受百分比，只接受一个具体的像素值，所以，如果想按照比例来设置列宽需要费些周折。Google了一下，有两种方法可以做到：

第一种方法，不要设置width为百分比，而设置为一个小数，所有列的小数值的和必须为1。

<mx:DataGrid  width="100%"  height="100%">
  <mx:columns>
    <mx:DataGridColumn headerText="Name" dataField="name" width=".25" />
    <mx:DataGridColumn headerText="Age" dataField="age" width=".15" />
    <mx:DataGridColumn headerText="Job" dataField="job" width=".35" />
    <mx:DataGridColumn headerText="Height" dataField="height" width=".25" />
  </mx:columns>
</mx:DataGrid>

参见： http://www.switchonthecode.com/tutorials/flex-datagrid-percentage-width-columns

这种方法比较简单明了，但是如果你的项目不是用的标准Flex的库，而是自己公司开发的库，那么上面的就可能不工作，那么就只能采用下面一种方法了。

 

第二种方法：在DataGrid的creationComplete()回调函数中手动设置列宽，看下面的代码：

<mx:Script>
<![CDATA[
 function setRelativeColWidths(){
   dg1.getColumnAt(0).width =dg1.width*.10;
   dg1.getColumnAt(1).width =dg1.width*.15;
   dg1.getColumnAt(2).width =dg1.width*.50;
   dg1.getColumnAt(3).width =dg1.width*.10;
   dg1.getColumnAt(4).width =dg1.width*.15;
 }
]]>
</mx:Script>
<mx:DataGrid id="dg1" editable="false" hScrollPolicy="off" rowCount="5" 
width="50%" creationComplete="setRelativeColWidths()" resize="setRelativeColWidths()>

 

在creationComplete的回调函数setRelativeColWidths方法中，对每一列按照比例设置了列宽。

参见：http://kb2.adobe.com/cps/224/224468bb.html

但这种方法有个问题：设置列宽后，如果DataGrid自身大小发生变化后，列的宽度不会自动调整，因此再在resize的时候让其调整一次列宽，这样就完美了。