Flex Datagrid를 데이터에 맞습니다

Question

0과 100 사이에 달라질 수있는 텍스트 데이터 행이 있으며, 한 번에 화면에서 모두 볼 필요가 있습니다. 줄 * rowheight> gridHeight까지 그리드에 대한 기본 동작은 적합합니다.

기본적으로 그리드 높이에 따라 계산하려면 항목 높이 또는 행 높이가 필요합니다. 나는 PaddingTop과 Paddingbottom을 0으로 설정했지만 여전히 행 사이에 상당한 양의 공백이 있습니다.

내 datagrid 구성 요소 ...

<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>

<mx:Script>
    <![CDATA[

    private function OnCreationComplete():void
    {
        //setRowHeight(10);
    }

    override protected function setRowHeight(v:Number):void
    {
        super.setRowHeight(v);
    }

    ]]>
</mx:Script>

</mx:DataGrid>

setrowheight ()는 도움이되지만 행 높이를 10과 같은 것으로 설정하면 셀보다 셀보다 더 큰 셀의 항목 렌더가 도움이됩니다.

Answer 1

고마워요, 그게 많은 도움이되었습니다. 이것이 나의 최종 그리드 구성 요소입니다. 몇 가지 콜 아웃으로 인해 실제로 자체적으로 포함되어 있지는 않지만 다른 사람이 자신의 일을하는 데 도움이된다면 훌륭합니다!

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>

<mx:Script>
    <![CDATA[
        import mx.containers.Panel;
    import mx.core.Application;
    import mx.events.ResizeEvent;

    protected function OnResize(event:ResizeEvent):void
    {
        this.invalidateDisplayList();
    }

/**
 *  @private
 *  Sizes and positions the column headers, columns, and items based on the
 *  size of the DataGrid.
 */
override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    if( this.collection.length > 0 ) // so don't divide by zero
    {
        var appHeight:Number = Application.application.height;
        var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
        var boxHeight:Number = Application.application.vboxViewAll.height;
        if( boxHeight > 0 )
        {
            var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
            var calcHeight:Number = gridHeight / this.collection.length;
            var calcHeightFloor:Number = Math.floor( calcHeight );
            setRowHeight( calcHeightFloor );
            //var p:Panel = this.parent as Panel;
            //p.title = calcHeightFloor.toString();
            if( calcHeightFloor <= 10 )
                this.setStyle("fontSize",calcHeightFloor);
        }
    }
    super.updateDisplayList(unscaledWidth,unscaledHeight);
}

    ]]>
</mx:Script>

</mx:DataGrid>

Answer 2

DataGrid.variablerowheight 속성을보고 싶을 수도 있습니다. 이것이 False로 설정 될 때 (기본값) 모든 행이 가장 큰 Itemrenderer와 동일합니다. 또한 각 데이터 컬럼에 대해 자신의 Itemrenderer를 작성할 수도 있습니다.

그래도 DataProvider의 항목 수를 기준으로 행 높이를 설정하는 경우 DataGrid.RowHeight 속성을 설정할 수 있습니다 (그리드가 고정 된 높이가 100%라고 가정 할 수 있습니다).

myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);

(나는 당신이 반올림하는 분수 값으로 끝나면 스크롤 막대가 필요하기 때문에 여기서 바닥을 가져 가고 있습니다.

내가 알았 듯이이 접근법의 유일한 문제는 Itemrenderer가 너무 작은 줄로 제대로 표시되지 않을 수 있다는 것입니다. 높이를 기준으로 렌더러 내에서 글꼴을 변경하여이를 해결할 수 있다고 생각합니다.