apache-flex - フレックスでデータグリッドの特定の列に水平スクロールバーを実装する

Question

フレックスでデータグリッドの特定の列に水平スクロールバーを実装する方法は? 行が特定のレンダリングされたグラフィックス コンポーネントを表示している列があるとします。列幅を超える場合、その特定の列にスクロールバーを設定するにはどうすればよいですか? horizo​​ntalScrollPolicy="on" を設定すると、データグリッド全体に水平スクロールバーが設定されます。特定の列にそれが欲しいのですが、これはできますか?

Answer 1

使用するデータグリッド コンポーネントのバージョン (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>

//編集

「偽のアプローチ」の意味は次のとおりです。

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