apache-flex - 在flex中为特定列的数据网格实现水平滚动条

Question

如何在flex中为特定列的数据网格实现水平滚动条？假设我有一列，其行显示特定的渲染图形组件。如果它超过列宽，那么如何为该特定列设置滚动条？如果我设置 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>