Flexデータグリッドをデータに適合させる

StackOverflow https://stackoverflow.com/questions/418765

  •  03-07-2019
  •  | 
  •  

質問

テキストデータの行は0から100の間で変化する可能性があり、一度にすべてを画面に表示する必要があります。行* rowHeight＆gt;まで、グリッドのデフォルトの動作は問題ありません。 gridHeight。

基本的に、グリッドの高さに基づいて計算するには、アイテムの高さ、または行の高さにフックが必要です。 paddingTopとpaddingBottomをゼロに設定しましたが、行間にはまだかなりの空白があります。

マイデータグリッドコンポーネント... 

<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のような値に設定した場合、セルよりも大きいセルのitemRenderは

役に立ちましたか？

解決 2

インフェリス、ありがとうございます。これが私の最終的なグリッドコンポーネントです。いくつかのコールアウトのために完全に自己完結しているわけではありませんが、他の誰かが自分のものを機能させるのに役立つなら、素晴らしい！

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

他のヒント

DataGrid.variableRowHeightプロパティを確認すると、これがfalse（デフォルト）に設定されている場合、すべての行が最大のitemRendererと同じ高さになります。各DataColumnに独自のitemRendererを書くことも検討できます。

ただし、dataProviderのアイテム数に基づいて行の高さを設定するだけの場合は、DataGrid.rowHeightプロパティを次のように設定できます（グリッドの高さが固定、たとえば100％であると仮定） ：

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

（端数を切り上げる場合はスクロールバーが必要になるため、ここでフロアを取得します）

このアプローチの唯一の問題は、お気づきのとおり、itemRendererが小さすぎる行に正しく表示されない可能性があることです。これは、高さに基づいてレンダラー内のフォントを変更することで解決できると思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top