DataGridColumn または AdvancedDataGridColumn が自動的に幅を変更して、コンテンツが収まるようにします..
私はフレックスが初めてです。HTML テーブルのようなものを実装したいと考えています。
レンダリングされるデータは単純なテキストです。一部の行には少し長いテキストがあります。その場合、DataGridColumn の幅を自動的に拡張したいと考えています。
これを解決するための助け。
前もって感謝します
DataGridColumn または AdvancedDataGridColumn が自動的に幅を変更して、コンテンツが収まるようにします..
私はフレックスが初めてです。HTML テーブルのようなものを実装したいと考えています。
レンダリングされるデータは単純なテキストです。一部の行には少し長いテキストがあります。その場合、DataGridColumn の幅を自動的に拡張したいと考えています。
これを解決するための助け。
前もって感謝します
DataGrid と AdvancedDataGrid の最大の問題の 1 つに遭遇しました。セルコンテンツを快適に表示するのがいかに難しいか、私は絶対に嫌いです. 理由はすぐにはわかりませんが、狭いフィールド値は非常に広いセルに表示され、幅の広いコンテンツとヘッダーは圧縮されます。
これは、何らかの理由で最初と最後の列に特に当てはまります。
私が見つけた唯一の解決策は、列に minWidth プロパティを設定することです。最初にデータを調べて、それらの列で最も広い外れ値を見つけ、それらが快適に収まるようにする必要があります。役立つ別の解決策は、左右にダミーの列を配置することです。幅と minWidths と maxWidths を非常に小さいサイズ (たとえば 5) に設定します。
<mx:columns>
<mx:DataGridColumn id="leftDummy" width="5" minWidth="5" maxWidth="5"/>
<!-- Your "real" columns here, with minWidth assignments -->
<mx:DataGridColumn id="rightDummy" width="5" minWidth="5" maxWidth="5"/>
</mxcolumns>
ただし、注意してください。列に幅を設定すると、リテラル値や実際のパーセンテージではなく、中途半端な比率として解釈されます。列のサイズ変更手順は、計算にうんざりし、列幅のある種の「合理的な」解釈に落ち着くと推測することしかできません。
現時点では、これらの問題などを解決するサードパーティ製品であるElfGridを使用することを検討しています。ドキュメント、特に ElfColumnUtils を参照してください。これらの問題に対処するための非常に便利な方法がいくつかあります。また、私が行ったテストでは非常に高速です。
これが私がそれをする方法です、そしてそれは非常にうまくいきます...
バインド可能な変数を作成し、開始番号(たとえば、100)を指定します。例:
[Bindable] private var colWidth:int = 100;
データバインディングを使用して列のサイズを設定します。例:
mx:DataGridColumn width="{colWidth}"
データグリッドにサイズ変更イベントハンドラーを追加します。例:
myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize);
ハンドラーで、データグリッドの新しい幅をリッスンし、その数値を取得して列の量で除算するか(すべての列が等しい場合)、計算を行って列の幅の「パーセンテージ」を作成します、 元:
private function onDataGridResize(event:ResizeEvent):void {
colWidth = myDataGrid.width / numberOfColumns;
}
私は同じ問題を抱えていました。長い文字列のサイズを事前に知っておく必要があります。次に、そのサイズの MinWidth を割り当て、列のサイズを変更可能 = 'false' にします。
それは私のために働いた
可能な幅を推測できる場合は、幅を一定のパーセンテージに設定できます。しかし、私は別のオプションを提案します:
このようにして、長いテキストが複数の行に配置され、その行の高さだけが増加します。試してみてください。これが必要ない場合は、datagridColumn を拡張する新しいクラスを作成する必要があると思います。
<mx:DataGrid dataProvider="{testAC}" width="80%" height="100%" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="company" wordWrap="true"/> <mx:DataGridColumn dataField="share"/>
<mx:DataGridColumn dataField="expense"/>
</mx:columns>
</mx:DataGrid>
乾杯、PK