apache-flex - 最後の列の DataGrid 余分なスペース

Question

最後の列の余分なスペースを削除しようとして、さまざまなアプローチを試しましたが、何も機能しません。スクロールバーが表示されるたびに、グリッドが奇妙な方法で動作し、最後の列の幅が70であることに気付きますが、どういうわけかグリッドが余分なスペースを追加しています.

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.collections.IViewCursor;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.managers.CursorManager;

            [Bindable]
            private var itemAC:Array = [
                {name:"ABC", quantity:5, color:"Red", size:54, hasLogo:true},
                {name:"ABC1", quantity:6, color:"Green", size:46, hasLogo:false}
                ];

        ]]>
    </mx:Script>
    <mx:Canvas width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
               verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
                     horizontalScrollPolicy="auto">
            <mx:columns>
                <mx:DataGridColumn width="70" dataField="name"/>
                <mx:DataGridColumn width="70"  dataField="quantity"/>
                <mx:DataGridColumn width="70"  dataField="color"/>
                <mx:DataGridColumn width="70"  dataField="size"/>
                <mx:DataGridColumn width="70"  dataField="hasLogo" resizable="false"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>

</mx:Application>

Answer 1

データグリッドの幅を 100% に指定しています。したがって、各列の幅に関係なく、使用可能なスペース全体を占有します。割り当てられたスペースよりも少ないスペースを使用しているため、残りのスペースは最後に追加されます。したがって、要件に応じて幅を調整してみてください

Canvas を水平方向にスクロール可能にする MXML を次に示します。Datagrid の width プロパティを削除する

<mx:Canvas width="352" height="45%"  backgroundColor="red" horizontalCenter="0"
               verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="auto">
        <mx:DataGrid height="100%" id="dg" dataProvider="{itemAC}"
                     horizontalScrollPolicy="auto">
            <mx:columns>
                <mx:DataGridColumn width="70" dataField="name"/>
                <mx:DataGridColumn width="70"  dataField="quantity"/>
                <mx:DataGridColumn width="70"  dataField="color"/>
                <mx:DataGridColumn width="70"  dataField="size"/>
                <mx:DataGridColumn width="70"  dataField="hasLogo" resizable="false"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>

Answer 2

私はそれが少し遅すぎることを知っています。しかし、遅いよりはましです。

私はまったく同じ問題を抱えていました。私の解決策は、右側に空のダム列を追加することです。空のスペースを占有し、ユーザーが右端の列のサイズを変更するための少しの余地を与えます。

//add an empty column at the right side
col = new AdvancedDataGridColumn("");
col.width = 80;
col.sortable = false;
col.draggable = false;
col.editable = false;

Answer 3

そのすべてに幅を与えないでください。最初のものを残してください。コードはそのようになります。

<mx:Canvas width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
           verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
                 horizontalScrollPolicy="auto" resizableColumns="false">
        <mx:columns>
            <mx:DataGridColumn width="70" dataField="name"/>
            <mx:DataGridColumn width="70"  dataField="quantity"/>
            <mx:DataGridColumn width="70"  dataField="color"/>
            <mx:DataGridColumn width="70"  dataField="size"/>
            <mx:DataGridColumn dataField="hasLogo"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Canvas>

問題は、DataGrid でresizableColumns="false "に置き換えられるresizable="false"にあります。

これは間違いなくあなたの問題を解決します。

ごきげんよう.....

Answer 4

データグリッド幅を 350 に設定します。水平スクロール バーが必要ない場合は、360 に設定します。

Answer 5

私はここでも同様の問題を抱えていました。

解決 ：

余分なスペースは、データグリッド幅= 100％を指定したためです。

これは、アプリケーションのサイズを複数の解像度に変更するのに役立ちました。

<mx:Canvas id="datagridCanvas" width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
       verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
             horizontalScrollPolicy="auto" resizableColumns="false">
    <mx:columns>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="name"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="quantity"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="color"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="size"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="hasLogo"/>
    </mx:columns>
</mx:DataGrid>

Answer 6

これを試してください horizo​​ntalScrollPolicy="off"