Flex：在 Spark DataGrid 中显示 URL 链接运行到相邻列

Question

这是一个您可以运行的独立应用程序，它说明了我的问题。当在 Flex spark DataGrid 中使用 LinkBut​​ton 来显示可点击的 URL 时，如果 URL 的列宽变得太短（即可能由用户调整），则显示的 URL 文本会运行到它的相邻列中。如果您运行下面的代码，您将看到以下内容：

有人知道如何改进吗？理想情况下，URL 文本将被截断以适应其列的宽度，并且每当发生这种截断时都会显示一个工具提示（例如，类似于 spark 标签属性showTruncationTip="true"）。人们在实践中做了什么？

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   minWidth="300" minHeight="300">
   <fx:Declarations>
     <!-- Define the data -->
     <fx:XMLList id="siteList">
       <site> <name>IMDB</name> <url>http://www.imdb.com</url> </site>
       <site> <name>BoardgameGeek</name> <url>http://www.boardgamegeek.com</url> </site>
       <site> <name>Yahoo! Finance</name> <url>http://finance.yahoo.com</url> </site>
     </fx:XMLList>
     <!-- Use an XMLListCollection for the Spark DataGrid -->
     <s:XMLListCollection id="siteList2" source="{siteList}"/>
  </fx:Declarations>
  <s:layout> <s:VerticalLayout/> </s:layout>
  <s:Panel title="Spark DataGrid Links" width="300" height="300"
      horizontalCenter="0" verticalCenter="0">
    <s:DataGrid id="sparkDataGrid"
        width="100%" height="100%"
        dataProvider="{siteList2}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="url" headerText="URL" width="150"  itemRenderer="myItemRenderer"/>
                <s:GridColumn dataField="name" headerText="Name"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
  </s:Panel>    
</s:Application>

而名为 myItemRenderer.mxml 的文件（位于同一目录中）是：

<?xml version="1.0" encoding="utf-8"?>
  <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" >

  <s:HGroup height="25" verticalAlign="middle" horizontalAlign="left">
    <mx:LinkButton label="{data.url}" 
       textDecoration="underline" 
       textRollOverColor="0x7777FF" 
       click="navigateToURL(new URLRequest(data.url))" 
       width="100%" 
       labelPlacement="left" 
       color="0x0000DD"/>       
  </s:HGroup>
</s:GridItemRenderer>

Answer 1

对此改进的一种方法是在您的GridItemRenderer 中将clipAndEnableScrolling 设置为true，而不是截断并显示在工具提示上。

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    clipAndEnableScrolling="true">

这将强制链接不超过其允许的视口，因此文本不会覆盖您的其他列文本。在几分钟的实验中，我无法强制它截断并显示在工具提示上。