1

Flex Datagrid の特定の列に左矢印と右矢印を追加する必要があります。左矢印と右矢印をクリックすると、下の列がスクロールして他の列が表示されます。Datagrid の最初の列は常に表示されます (固定)。列 1,2,3,4 が表示されているとします。右矢印をクリックすると、列 1、5、6、7 が表示されます。基本的に、Datagrid ヘッダーの機能のようなスクローラーが必要です。

それを達成する方法を教えてください。

4

1 に答える 1

0

これがあなたを助けるかもしれないサンプルコードです。

<?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>

于 2012-11-19T11:21:19.833 に答える