Flex Datagrid 헤더의 스크롤 기능

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>