当前位置：文江博客话题详情

Flex Spark 数据网格和自动换行

发布于 2024-12-16 21:35:55 字数 1863 浏览 0 评论 0原文

我想要一个 Spark 数据网格，它可以自动换行所有相关的行。目前，单元格的宽度似乎取决于第一行的内容，然后后续行将自动换行。例如：

1_ 如果第 1 列的第一行为

abcde fghij

，第二行为 abcde fghij klmnop

第二行将自动换行。

2_ 如果第 1 列的第一行为

abcde fghij klmnop

，第二行为 abcde fghij

不会有自动换行，第 1 列将是 abcde fghij klmnop 的宽度

我想要的是一个适合容器的数据网格，并在适当的地方进行自动换行。

到目前为止，我的代码是

<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

private function contentCreationCompleteHandler(event:FlexEvent):void {
    var dyna1:Object = { name: "John", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz "};
    var dyna2:Object = { name: "Richard", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz " };
    var dyna3:Object = { name: "Peter", description: "abcde fghij klmno pqrst uvwxyz " };
    grid.dataProvider = new ArrayCollection([dyna2, dyna1, dyna3]);
}
]]></fx:Script>

<s:DataGrid id="grid" width="100%" height="100%" variableRowHeight="true">
<s:columns>
    <s:ArrayList>
        <s:GridColumn headerText="name" width = "100" dataField="name"/>
        <s:GridColumn headerText="description" dataField="description"/>
    </s:ArrayList>
</s:columns>
</s:DataGrid>

指定数据网格的宽度为 100%，容器的宽度为 400。容器可以调整大小，因此我希望描述能够填充可用空间。当应用程序打开时，会出现一个滚动条，并且整个数据网格宽度超过 400。我希望数据网格将保持在 400 并相应地自动换行。

如果我移动对象添加到数据提供者的顺序，我会得到不同的结果。我将variableRowHeight 设置为 true 以启用自动换行，如这篇优秀文章中详细介绍的 http://hansmuller-flex.blogspot.com /2011/05/controlling-text-wrapping-in-datagrid.html

如何使数据网格动态调整为容器宽度的 100% 并自动换行发生在所有行上？（不仅仅是第 1 行之后的行）

提前致谢

原文

I would like to have a spark datagrid that wordwraps all rows where relevant. At the moment it appears like the width of a cell is dependent on the contents of the first row and then subsequent rows are word wrapped. For example:

1_
If column 1 has a first row of

abcde fghij

and a second row of
abcde fghij klmnop

this second row would be word wrapped.

2_
If column 1 has a first row of

abcde fghij klmnop

and a second row of
abcde fghij

there would be no word wrapping and column 1 would be the width of abcde fghij klmnop

What I want is to have a datagrid that fits a container and rows wordwrap where appropriate.

My code so far is

<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;

private function contentCreationCompleteHandler(event:FlexEvent):void {
    var dyna1:Object = { name: "John", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz "};
    var dyna2:Object = { name: "Richard", description: "abcde fghij klmno pqrst uvwxyz abcde fghij klmno pqrst uvwxyz " };
    var dyna3:Object = { name: "Peter", description: "abcde fghij klmno pqrst uvwxyz " };
    grid.dataProvider = new ArrayCollection([dyna2, dyna1, dyna3]);
}
]]></fx:Script>

<s:DataGrid id="grid" width="100%" height="100%" variableRowHeight="true">
<s:columns>
    <s:ArrayList>
        <s:GridColumn headerText="name" width = "100" dataField="name"/>
        <s:GridColumn headerText="description" dataField="description"/>
    </s:ArrayList>
</s:columns>
</s:DataGrid>

I am specifying for the datagrid to have a width of 100% and the container to have a width of 400. The container can be resized so I want the description to fill the available space. When the application opens there is a scrollbar and the whole datagrid is wider than 400. I was hoping that the datagrid would stay at 400 and would wordwrap accordingly.

If I move the order the objects are added to the dataprovider I have different results. I am setting variableRowHeight to true to enable the word wrapping as detailed in this excellent article
http://hansmuller-flex.blogspot.com/2011/05/controlling-text-wrapping-in-datagrid.html

How can I get the datagrid to dynamically resize to 100% of the container width and for wordwrapping to happen on all rows? (not just rows after row 1)

Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉絮湮 2024-12-23 21:35:55

我也遇到了同样的问题，第一行宽度被搞乱了，经过几个小时的挖掘，终于在几个博客上偶然发现了修复第一行宽度的答案。

您基本上必须在数据网格上设置“典型项目”，否则 Spark Datagrid 将自动使用第一行来确定宽度：

DataGrid的典型项用于计算初始宽度
每个未指定显式宽度的 GridColumn。
下面是指定典型项的 DataGrid 示例。

<s:DataGrid id="dataGrid" requestedRowCount="5" verticalCenter="0" horizontalCenter="0">
    <s:typicalItem>
        <s:DataItem key="99999" name="Typical Item" price="123.45" call="false"/>
    </s:typicalItem>

    <s:ArrayCollection id="items">
        <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
        <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
        ...
    </s:ArrayCollection>
</s:DataGrid>

有关详细信息，请查看以下链接：

I had the same problem with the first row width being messed up and after many hours of digging around finally stumbled across the answer to fix the first row width on a few blogs.

You basically have to set a 'typicalItem' on the datagrid or else the Spark Datagrid will automatically use the first row to determine the widths:

The DataGrid's typicalItem is used to compute the initial width of
each GridColumn that doesn't specify an explicit width.
Here's an example of a DataGrid that specifies a typicalItem.

<s:DataGrid id="dataGrid" requestedRowCount="5" verticalCenter="0" horizontalCenter="0">
    <s:typicalItem>
        <s:DataItem key="99999" name="Typical Item" price="123.45" call="false"/>
    </s:typicalItem>

    <s:ArrayCollection id="items">
        <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
        <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
        ...
    </s:ArrayCollection>
</s:DataGrid>

For more info, check out these links:

回复收藏 0 原文

~没有更多了~