在flex中爲特定的datagrid列實現水平滾動條

Question

如何在flex中爲特定的datagrid列實現水平滾動條？假設我有一個列的行顯示特定的渲染圖形組件。如果它超過列寬，那麼我怎樣才能爲該特定列設置滾動條？如果我設置horizo​​ntalScrollPolicy =「on」，那麼它爲整個數據網格設置水平滾動條。我想要特定的列。可以這樣做嗎？

Answer 1

您尚未指定使用哪個版本的datagrid組件（mx或spark）。這裏有兩個例子。我用一個簡單的文字作爲滾動欄的內容。無論內容是什麼，都可以使用這種方法。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
<fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 

     [Bindable]private var collection:ArrayCollection = new ArrayCollection([ 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"}, 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"}, 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"} 
     ]); 
    ]]> 
</fx:Script> 

<s:VGroup x="10" y="10"> 

    <!-- the new Spark DataGrid --> 

    <s:DataGrid 
     width="300" height="180" 
     rowHeight="50" 
     dataProvider="{collection}"> 

     <s:columns> 
      <s:ArrayList> 
       <s:GridColumn dataField="field01" headerText="Field 1"/> 
       <s:GridColumn dataField="content" headerText="Content" width="100"> 
        <s:itemRenderer> 
         <fx:Component> 
          <s:GridItemRenderer> 
           <s:Scroller width="100%" height="100%"> 
            <s:HGroup width="100%" height="100%" verticalAlign="middle"> 
             <s:Label text="{data.content}" width="300"/> 
            </s:HGroup> 
           </s:Scroller> 

          </s:GridItemRenderer> 
         </fx:Component> 
        </s:itemRenderer> 
       </s:GridColumn> 
       <s:GridColumn dataField="field02" headerText="Field 2" width="100"/> 
      </s:ArrayList>     
     </s:columns>     
    </s:DataGrid> 

    <!-- the old MX DataGrid --> 
    <mx:DataGrid 
     width="300" height="180" 
     rowHeight="50" 
     dataProvider="{collection}"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/> 

      <mx:DataGridColumn dataField="content" headerText="Content" width="100"> 
       <mx:itemRenderer> 
        <fx:Component> 
         <mx:HBox width="100%" > 
          <mx:Label text="{data.content}"/> 
         </mx:HBox> 
        </fx:Component> 
       </mx:itemRenderer> 
      </mx:DataGridColumn> 

      <mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/> 
     </mx:columns> 

    </mx:DataGrid> 
</s:VGroup> 

</s:Application> 

//編輯

這是我所說的 「僞造辦法」 meaned：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
<fx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 

     [Bindable]private var collection:ArrayCollection = new ArrayCollection([ 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"}, 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"}, 
      {field01:"field01", content:"your content your content your content your content", field02:"field02"} 
     ]); 

     [Bindable]public var currentScrollPosition:int = 0; 
    ]]> 
</fx:Script> 

<s:VGroup x="10" y="10"> 
    <mx:DataGrid 
     width="300" height="180" 
     rowHeight="50" 
     dataProvider="{collection}"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/> 

      <mx:DataGridColumn dataField="content" headerText="Content" width="100"> 
       <mx:itemRenderer> 
        <fx:Component> 

         <mx:HBox width="100%" horizontalScrollPolicy="off"> 
          <mx:HBox id="hbMove" x="{-outerDocument.currentScrollPosition}" width="300"> 
           <mx:Label text="{data.content}"/> 
          </mx:HBox> 
         </mx:HBox> 

        </fx:Component> 
       </mx:itemRenderer> 
      </mx:DataGridColumn> 

      <mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/> 
     </mx:columns> 

    </mx:DataGrid> 

    <mx:HBox horizontalGap="0"> 
     <s:Spacer width="100"/> 
     <mx:HScrollBar id="sbMover" width="100" minScrollPosition="0" maxScrollPosition="300" scroll="{currentScrollPosition = sbMover.scrollPosition}"/> 
    </mx:HBox> 

</s:VGroup> 

</s:Application>