Flex Datagrid header中的滾動功能

Question

我需要爲Flex Datagrid中的特定列添加左右箭頭。點擊左側和右側箭頭時，下面的列應滾動顯示其他列。 Datagrid的第一列始終可見（固定）。說列1,2,3,4現在可見。點擊右箭頭，第1,5,6,7列顯示。基本上我需要一個類似於Datagrid頭部功能的滾動器。

請讓我知道如何實現它。

Answer 1

這裏是可以幫助你的示例代碼。

<?xml version="1.0" encoding="utf-8"?> 

<mx:Script> 
    <![CDATA[ 
    import mx.collections.ArrayCollection; 

    [Bindable] 
    private var dpFlat:ArrayCollection = new ArrayCollection([ 
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}, 
    {Region:"Southwest", Territory:"Central California", 
    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}, 
    {Region:"Southwest", Territory:"Nevada", 
    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}, 
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}, 
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000} 
    ]); 
    ]]> 
</mx:Script> 

<mx:DataGrid id="dg" lockedColumnCount="1" width="500" height="50%" horizontalScrollPolicy="on" rowCount="5" horizontalCenter="0" verticalCenter="0" dataProvider="{dpFlat}"> 
    <mx:columns> 
     <mx:DataGridColumn id="col" width="100" dataField="Region" headerText="Region" > 
      <mx:headerRenderer > 
       <mx:Component id="cmp"> 
        <mx:Image width="25" height="25" source="{imgSource}" click="image1_clickHandler(event)" > 
         <mx:Script> 
          <![CDATA[ 
           import mx.core.Application; 
           [Bindable] 
           private var imgSource:String = "arrow_left.gif"; 
           var flag:Boolean; 
           protected function image1_clickHandler(event:MouseEvent):void 
           { 

            if(flag) 
            { 
             flag = false; 
             Application.application.dg.horizontalScrollPosition = 0; 
             imgSource = "arrow_left.gif"; 

            } 
            else 
            { 
             flag = true; 
             imgSource = "arrow_right.gif"; 
             Application.application.dg.horizontalScrollPosition = 2 

            } 
           } 
          ]]> 
         </mx:Script> 
        </mx:Image> 

       </mx:Component> 
      </mx:headerRenderer> 
     </mx:DataGridColumn> 
     <mx:DataGridColumn id="col1" width="300" dataField="Territory" headerText="Territory"/> 
     <mx:DataGridColumn id="col2" width="300" dataField="Territory_Rep" headerText="Territory_Rep"/> 
     <mx:DataGridColumn id="col3" width="300" dataField="Actual" headerText="Actual" /> 
     <mx:DataGridColumn id="col4" width="300" dataField="Estimate" headerText="Estimate" /> 
    </mx:columns> 
</mx:DataGrid>