Flex: l'affichage de l'URL Lien dans un DataGrid Spark s'exécute dans la colonne voisine

Question

Voici une application autonome que vous pouvez exécuter et qui illustre ma question. Lorsque vous utilisez un LinkButton dans Flex spark DataGrid pour afficher une URL cliquable, le texte de l'URL affiché est exécuté dans sa colonne voisine si la largeur de la colonne de l'URL devient trop courte (c'est-à-dire éventuellement ajustée par l'utilisateur). Si vous exécutez le code ci-dessous, voici ce que vous verrez:

Quelqu'un sait comment améliorer cela? Idéalement, le texte d'URL serait tronqué pour tenir dans la largeur de sa colonne et une info-bulle s'afficherait chaque fois que cette troncature se produit (par exemple, similaire à une propriété d'étiquette d'étincelle showTruncationTip="true"). Que font les gens en pratique?

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

Et le fichier myItemRenderer.mxml intitulé (situé dans le même répertoire) est:

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

Une façon d'améliorer sur ce point - pas tronquer et afficher sur infobulle comme desired-- est de définir clipAndEnableScrolling à true dans votre GridItemRenderer.

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

Cela forcera le lien à ne pas dépasser la fenêtre autorisée, de sorte que le texte ne couvre pas votre autre texte de colonne. En quelques minutes d'expérimentation, je n'ai pas été capable de le forcer à tronquer et à apparaître sur l'infobulle.