動態更改FLEX中的Datagrid列的寬度

Question

我們是否可以通過單擊列的邊框來動態更改數據列的寬度，以顯示太長而無法顯示並需要滾動的完整字符串？如果是這樣，怎麼樣？

另外，如何確保列寬根據字符數/字符串長度動態變化;因爲很多次數據太長而無法顯示。在顯示到數據網格之前，我們可以設置列寬以考慮數據的長度嗎？

Answer 1

對於Gridview控件，可以深入到SelectedRowStyle屬性並將Wrap設置爲True。

Answer 2

這是我想出了但它可能不適合大數據提供高效：

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="onComplete();"> 

    <mx:Script> 
     <![CDATA[ 
      // imports: 
      import mx.events.FlexEvent; 
      import mx.core.UIComponent; 
      import mx.controls.dataGridClasses.DataGridColumn; 
      import mx.controls.Text; 
      import mx.utils.ObjectUtil; 
      import mx.controls.Label; 
      import mx.collections.ArrayCollection; 
      // data provider: 
      [Bindable] private var dp:ArrayCollection = new ArrayCollection(); 

      private function onComplete():void { 
       // populate data provider here 
       // to avoid calcMaxLengths execution when the app is created: 
       dp = new ArrayCollection(
        [ 
         { col1: "Short", col2: "Other column 1" }, 
         { col1: "Some long string", col2: "Other column 2" }, 
         { col1: "Short", col2: "Other column 3" }, 
         { col1: "Short", col2: "Other column 4" }, 
         { col1: "The longest value in this column", col2: "Other column 5" }, 
         { col1: "Short", col2: "Other column 6" }, 
         { col1: "Short", col2: "Other column 7" } 
        ] 
       ); 
      } 

      // this is going to be executed whenever the data provider changes: 
      [Bindable("dataChange")] 
      private function calcMaxLengths(input:ArrayCollection):ArrayCollection { 
       // if there are items in the DP: 
       if (input.length > 0) { 
        // and no SPECIAL child exists: 
        if (getChildByName("$someTempUICToRemoveAfterFinished") == null) { 
         // create new SPECIAL child 
         // this is required to call measureText 
         // if you use custom data grid item renderer 
         // then create instance of it instead of UIComponent: 
         var uic:UIComponent = new UIComponent(); 
         // do not show and do not mess with the sizes: 
         uic.includeInLayout = false; 
         uic.visible = false; 
         // name it to leverage get getChildByName method: 
         uic.name = "$someTempUICToRemoveAfterFinished"; 
         // add event listener: 
         uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated); 
         // add to parent: 
         addChild(uic); 
        } 
       } 
       // return an input: 
       return input; 
      } 

      // called when SPECIAL child is created: 
      private function onTempUICCreated(event:FlexEvent):void { 
       // keep the ref to the SPECIAL child: 
       var renderer:UIComponent = UIComponent(event.target); 
       // output - this will contain max size for each column: 
       var maxLengths:Object = {}; 
       // temp variables: 
       var key:String = ""; 
       var i:int=0; 
       // for each item in the DP: 
       for (i=0; i<dp.length; i++) { 
        var o:Object = dp.getItemAt(i); 
        // for each key in the DP row: 
        for (key in o) { 
         // if the output doesn't have current key yet create it and set to 0: 
         if (!maxLengths.hasOwnProperty(key)) { 
          maxLengths[key] = 0; 
         } 
         // check if it's simple object (may cause unexpected issues for Boolean): 
         if (ObjectUtil.isSimple(o[key])) { 
          // measure the text: 
          var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+""); 
          // and if the width is greater than longest found up to now: 
          if (cellMetrics.width > maxLengths[key]) { 
           // set it as the longest one: 
           maxLengths[key] = cellMetrics.width; 
          } 
         } 
        } 
       } 

       // apply column sizes: 
       for (key in maxLengths) { 
        for (i=0; i<dg.columnCount; i++) { 
         // if the column actually exists: 
         if (DataGridColumn(dg.columns[i]).dataField == key) { 
          // set size + some constant margin 
          DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12; 
         } 
        } 
       } 
       // cleanup: 
       removeChild(getChildByName("$someTempUICToRemoveAfterFinished")); 
      } 

     ]]> 
    </mx:Script> 

    <mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="col1" width="40" /> 
      <mx:DataGridColumn dataField="col2" width="100" /> 
     </mx:columns> 
    </mx:DataGrid> 

</mx:WindowedApplication> 

Answer 3

所以我有一個類似的問題，這裏是我發現了什麼。如果設置爲：

horizontalScrollPolicy="off" 

然後，列寬將自動調整大小以適應DataGrid的寬度。只要將滾動設置爲打開或關閉並且未設置爲自動，您也可以手動設置列寬。我發現了一篇有趣的文章，http://junleashed.wordpress.com/2008/07/10/flex-datagridcolumn-width-management/。基本上，他手動管理列寬，然後計算滾動條是否應該打開或關閉。

Answer 4

我最近遇到了同樣的問題，我發現的唯一的解決辦法是使用自定義的函數優化DataGrid的列寬的建議here：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
<![CDATA[ 
import mx.core.UITextField; 
import mx.controls.dataGridClasses.DataGridItemRenderer; 

public function optimiseGridColumns(dg:DataGrid):void { 
         var dgCol:DataGridColumn; 
         var renderer:UITextField; 
         var tf:TextFormat; 
         var col:int; 

         if (dg.columnCount > 0 && dg.dataProvider != null) { 
         // initialize widths array 
           var widths:Array = new Array (dg.columnCount); 
           for (col = 0; col < widths.length; ++col) { 
             widths[col] = -1; 
           } 

         // go through each data item in the grid, estimate 
         // the width of the text in pixels 
           for each (var item:Object in dg.dataProvider) { 
             for (col = 0; col < widths.length; ++col) { 
               renderer = new DataGridItemRenderer(); 
               // Must add to datagrid as child so that it inherits 
               // properties essential for text width estimation, 
               // such as font size 
               dg.addChild(renderer); 

               dgCol = dg.columns[col] as DataGridColumn; 
               renderer.text = dgCol.itemToLabel(item); 
               widths[col] = Math.max(renderer.measuredWidth + 10,widths[col]); 

               // remove renderer from datagrid when we're done 
               dg.removeChild(renderer); 
             } 
           } 

           // go through headers in the grid, estimate the width of 
           // the text in pixels, assuming the text is bold 
           for (col = 0; col < widths.length; ++col) { 
             // it's ok to reuse renderer, but I chose not 
             // to for safety reasons. Optimize if needed. 
             renderer = new DataGridItemRenderer(); 

             // Must add to datagrid as child so that it inherits 
             // properties essential for text width estimation, 
             // such as font size 
             dg.addChild(renderer); 

             dgCol = dg.columns[col] as DataGridColumn; 
             renderer.text = dgCol.headerText; 

             tf = renderer.getTextFormat(); 
             tf.bold = true; 
             renderer.setTextFormat (tf); 

             widths[col] = Math.max(renderer.measuredWidth + 25, widths[col]); 

             // remove renderer from datagrid when we're done 
             dg.removeChild(renderer); 
           } 

           // set width of columns to determined values 
           for (col = 0; col < widths.length; ++col) 
           { 
             if (widths[col] != -1) 
             { 
               dg.columns[col].width = widths[col]; 
             } 
           } 
         } 
       } 

]]> 
</mx:Script> 
    <mx:XMLList id="employees"> 
     <employee> 
      <name>Christina Coenraets</name> 
      <phone>555-219-2270</phone> 
      <email>ccoenraets@fictitious.com</email> 
      <active>true</active> 
     </employee> 
     <employee> 
      <name>Joanne Wall</name> 
      <phone>555-219-2012</phone> 
      <email>jwall@fictitious.com</email> 
      <active>true</active> 
     </employee> 
     <employee> 
      <name>Maurice Smith</name> 
      <phone>555-219-2012</phone> 
      <email>maurice@fictitious.com</email> 
      <active>false</active> 
     </employee> 
     <employee> 
      <name>Mary Jones</name> 
      <phone>555-219-2000</phone> 
      <email>mjones@fictitious.com</email> 
      <active>true</active> 
     </employee> 
    </mx:XMLList> 
     <mx:DataGrid id="dg1" width="100%" height="100%" rowCount="5" dataProvider="{employees}" creationComplete="optimiseGridColumns(dg1)"> 
      <mx:columns> 
       <mx:DataGridColumn dataField="name" headerText="Name"/> 
       <mx:DataGridColumn dataField="phone" headerText="Phone"/> 
       <mx:DataGridColumn dataField="email" headerText="Email"/> 
      </mx:columns> 
     </mx:DataGrid> 

</mx:Application>