Flex AdvancedDataGrid – Utiliser un Formatter dans une colonne
La classe AdvancedDataGridColumn contient une propriété "formatter" à laquelle vous pouvez passer une instance d'une classe de type Formatter, ou un instance d'une classe héritant de Formatter. La classe Formatter va convertir la donnée en une chaîne personnalisée.
Par exemple, vous pouvez utiliser la classe CurrencyFormatter pour préfixer les valeurs de la colonne de prix avec le signe $ ou €.
Vous pouvez utiliser une classe Formatter en même temps qu'une callback pour la labelFunction et pour la styleFunction. Le fomatter sera appelé après ces fonctions de callback.
L'exemple suivant modifie l'exemple sur l'application de styles aux lignes et ajoute un CurrencyFormatter à la colonne de prix pour lui ajouter le signe €:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
// Include the data for the AdvancedDataGrid control.
include "StyleData.as"
// Artist name to highlight.
protected var artistName:String;
// Event handler to set the selected artist's name
// based on the selected Button control.
public function setArtistName(event:Event):void{
artistName=Button(event.currentTarget).label;
// Refresh row display.
myADG.invalidateList();
}
// Callback function that highlights in red
// all rows for the selected artist.
public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
if (data["Artist"] == artistName){
return {color:0xFF0000};
}
// Return null if the Artist name does not match.
return null;
}
]]>
</mx:Script>
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
dataProvider="{dpADG}"
styleFunction="myStyleFunc">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn dataField="Price">
<mx:formatter>
<mx:CurrencyFormatter currencySymbol="€" alignSymbol="right"/>
</mx:formatter>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox>
<mx:Button label="Pavement" click="setArtistName(event);"/>
<mx:Button label="Saner" click="setArtistName(event);"/>
<mx:Button label="The Doors" click="setArtistName(event);"/>
</mx:HBox>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Flex AdvancedDataGrid – Appliquer un style aux lignes et aux colonnes
Pour appliquer des styles aux lignes et aux colonnes d'un composant AdvancedDataGrid, vous devez utiliser des fonctions de callback. Pour contrôler le style d'une ligne, utilisez la propriété AdvancedDataGrid.styleFunction. Pour gérer le style d'une colonne, utilisez la propriété AdvancedDataGridColumn.styleFunction en lui spécifiant une callback.
La callback spécifiée par la propriété AdvancedDataGrid.styleFunction est invoquée en premier, suivie par la fonction spécifiée par la propriété AdvancedDataGridColumn.styleFunction. C'est pourquoi le composant AdvancedDataGrid applique d'abord le style aux lignes et ensuite aux colonnes.
Ces fonctions de callback doivent avoir la signature suivante:
function_name(data:Object, column:AdvancedDataGridColumn):Object
La fonction retourne un objet (Object) qui contient une ou plusieurs paires de la forme "propriete_de_style:valeur". Le champ "propriete_de_style" contient le nom d'une propriété de style telle que "color", et le champ "valeur" contient la valeur correspondante comme "0x00FF00.
Par exemple, vous pourriez retourner deux styles avec le code suivant:
{color:0xFF0000, fontWeight:"bold"}
Le composant AdvancedDataGrid invoque cette fonction de callback lorsqu'il met à jour sa liste d'affichage, quand le composant est dessiné pour la première fois ou lorsque vous appelez la méthode invalidateList().
Mes projets (Open Source)
Autres
