De développer Constantiner réponse, vous devrez créer un personnalisé HeaderRenderer et définir la Label's maxDisplayedLines à 2. Voici un exemple de rendu que j'ai trouvé:
MyRenderer.mxml
<?xml version="1.0" encoding="utf-8"?><!--
ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
--><!---
The DefaultGridHeaderRenderer class defines the default header renderer
for the columns of a Spark DataGrid control.
<p>Subclasses defined in MXML can redefine the values of the <code>labelDisplay</code>
and <code>sortIndicator</code> properties.</p>
@see spark.components.DataGrid
@see spark.components.GridColumnHeaderGroup
@see spark.components.gridClasses.GridItemRenderer
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
--><s:GridItemRendererminWidth="21"minHeight="21"xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"><fx:Declarations><!--- The default value of the <code>sortIndicator</code> property.
It must be an IFactory for an IVisualElement.
<p>This value is specified in a <code>fx:Declaration</code> block and can be overridden
by a declaration with <code>id="defaultSortIndicator"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
--><fx:Componentid="defaultSortIndicator"><s:Pathdata="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0"implements="spark.components.gridClasses.IGridVisualElement"><fx:Script>
<![CDATA[
import spark.components.DataGrid;
import spark.components.Grid;
/**
* @private
*/
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const color:uint = dataGrid.getStyle("symbolColor");
arrowFill1.color = color;
arrowFill2.color = color;
}
]]>
</fx:Script><s:fill><s:RadialGradientrotation="90"focalPointRatio="1"><!--- @private --><s:GradientEntryid="arrowFill1"color="0"alpha="0.6"/><!--- @private --><s:GradientEntryid="arrowFill2"color="0"alpha="0.8"/></s:RadialGradient></s:fill></s:Path></fx:Component><!--- Displays the renderer's label property, which is set to the column's <code>headerText</code>.
It must be an instance of a <code>TextBase</code>, like <code>s:Label</code>.
<p>This visual element is added to the <code>labelDisplayGroup</code> by the renderer's
<code>prepare()</code> method. Any size/location constraints specified by the labelDisplay
define its location relative to the labelDisplayGroup.</p>
<p>This value is specified with a <code>fx:Declaration</code> and can be overridden
by a declaration with <code>id="labelDisplay"</code>
in an MXML subclass.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
--><s:Labelid="labelDisplay"verticalCenter="1"left="0"right="0"top="0"bottom="0"textAlign="start"fontWeight="bold"verticalAlign="middle"maxDisplayedLines="2"showTruncationTip="true"/></fx:Declarations><fx:Script>
<![CDATA[
import spark.components.gridClasses.IGridVisualElement;
import mx.core.IVisualElement;
import spark.components.DataGrid;
import spark.components.GridColumnHeaderGroup;
import spark.components.gridClasses.GridColumn;
/**
* @private
*/
private function dispatchChangeEvent(type:String):void
{
if (hasEventListener(type))
dispatchEvent(new Event(type));
}
//----------------------------------
// maxDisplayedLines
//----------------------------------
private var _maxDisplayedLines:int = 1;
[Bindable("maxDisplayedLinesChanged")]
[Inspectable(minValue="-1")]
/**
* The value of this property is used to initialize the
* <code>maxDisplayedLines</code> property of this renderer's
* <code>labelDisplay</code> element.
*
* @copy spark.components.supportClasses.TextBase#maxDisplayedLines
*
* @default 1
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
*/
public function get maxDisplayedLines():int
{
return _maxDisplayedLines;
}
/**
* @private
*/
public function set maxDisplayedLines(value:int):void
{
if (value == _maxDisplayedLines)
return;
_maxDisplayedLines = value;
if (labelDisplay)
labelDisplay.maxDisplayedLines = value;
invalidateSize();
invalidateDisplayList();
dispatchChangeEvent("maxDisplayedLinesChanged");
}
//----------------------------------
// sortIndicator
//----------------------------------
private var _sortIndicator:IFactory;
private var sortIndicatorInstance:IVisualElement;
[Bindable("sortIndicatorChanged")]
/**
* A visual element that's displayed when the column is sorted.
*
* <p>The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>
* by this renderer's <code>prepare()</code> method. Any size/location constraints
* specified by the sortIndicator define its location relative to the sortIndicatorGroup.</p>
*
* @default null
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4.5
*/
public function get sortIndicator():IFactory
{
return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
}
/**
* @private
*/
public function set sortIndicator(value:IFactory):void
{
if (_sortIndicator == value)
return;
_sortIndicator = value;
if (sortIndicatorInstance)
{
sortIndicatorGroup.includeInLayout = false;
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorInstance = null;
}
invalidateDisplayList();
dispatchChangeEvent("sortIndicatorChanged");
}
/**
* @private
* Create and add the sortIndicator to the sortIndicatorGroup and the
* labelDisplay into the labelDisplayGroup.
*/
override public function prepare(hasBeenRecycled:Boolean):void
{
super.prepare(hasBeenRecycled);
if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
{
labelDisplayGroup.removeAllElements();
labelDisplayGroup.addElement(labelDisplay);
}
const column:GridColumn = this.column;
if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)
{
const dataGrid:DataGrid = column.grid.dataGrid;
const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;
if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))
{
if (!sortIndicatorInstance)
{
sortIndicatorInstance = sortIndicator.newInstance();
sortIndicatorGroup.addElement(sortIndicatorInstance);
}
//Initialize sortIndicator
sortIndicatorInstance.visible = true;
const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
if (gridVisualElement)
gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);
sortIndicatorGroup.includeInLayout = true;
sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
}
else
{
if (sortIndicatorInstance)
{
sortIndicatorGroup.removeElement(sortIndicatorInstance);
sortIndicatorGroup.includeInLayout = false;
sortIndicatorInstance = null;
}
}
}
}
]]>
</fx:Script><s:states><s:Statename="normal"/><s:Statename="hovered"/><s:Statename="down"/></s:states><!-- layer 1: shadow --><!--- @private --><s:Rectid="shadow"left="-1"right="-1"top="-1"bottom="-1"radiusX="2"><s:fill><s:LinearGradientrotation="90"><s:GradientEntrycolor="0x000000"color.down="0xFFFFFF"alpha="0.01"alpha.down="0"/><s:GradientEntrycolor="0x000000"color.down="0xFFFFFF"alpha="0.07"alpha.down="0.5"/></s:LinearGradient></s:fill></s:Rect><!-- layer 2: fill --><!--- @private --><s:Rectid="fill"left="0"right="0"top="0"bottom="0"><s:fill><s:LinearGradientrotation="90"><s:GradientEntrycolor="0xFFFFFF"color.hovered="0xBBBDBD"color.down="0xAAAAAA"alpha="0.85"/><s:GradientEntrycolor="0xD8D8D8"color.hovered="0x9FA0A1"color.down="0x929496"alpha="0.85"/></s:LinearGradient></s:fill></s:Rect><!-- layer 3: fill lowlight --><!--- @private --><s:Rectid="lowlight"left="0"right="0"top="0"bottom="0"><s:fill><s:LinearGradientrotation="270"><s:GradientEntrycolor="0x000000"ratio="0.0"alpha="0.0627"/><s:GradientEntrycolor="0x000000"ratio="0.48"alpha="0.0099"/><s:GradientEntrycolor="0x000000"ratio="0.48001"alpha="0"/></s:LinearGradient></s:fill></s:Rect><!-- layer 4: fill highlight --><!--- @private --><s:Rectid="highlight"left="0"right="0"top="0"bottom="0"><s:fill><s:LinearGradientrotation="90"><s:GradientEntrycolor="0xFFFFFF"ratio="0.0"alpha="0.33"alpha.hovered="0.22"alpha.down="0.12"/><s:GradientEntrycolor="0xFFFFFF"ratio="0.48"alpha="0.33"alpha.hovered="0.22"alpha.down="0.12"/><s:GradientEntrycolor="0xFFFFFF"ratio="0.48001"alpha="0"/></s:LinearGradient></s:fill></s:Rect><!-- layer 5: highlight stroke (all states except down) --><!--- @private --><s:Rectid="highlightStroke"left="0"right="0"top="0"bottom="0"excludeFrom="down"><s:stroke><s:LinearGradientStrokerotation="90"weight="1"><s:GradientEntrycolor="0xFFFFFF"alpha.hovered="0.22"/><s:GradientEntrycolor="0xD8D8D8"alpha.hovered="0.22"/></s:LinearGradientStroke></s:stroke></s:Rect><!-- layer 6: highlight stroke (down state only) --><!--- @private --><s:Rectid="hldownstroke1"left="0"right="0"top="0"bottom="0"includeIn="down"><s:stroke><s:LinearGradientStrokerotation="90"weight="1"><s:GradientEntrycolor="0x000000"alpha="0.25"ratio="0.0"/><s:GradientEntrycolor="0x000000"alpha="0.25"ratio="0.001"/><s:GradientEntrycolor="0x000000"alpha="0.07"ratio="0.0011"/><s:GradientEntrycolor="0x000000"alpha="0.07"ratio="0.965"/><s:GradientEntrycolor="0x000000"alpha="0.00"ratio="0.9651"/></s:LinearGradientStroke></s:stroke></s:Rect><!--- @private --><s:Rectid="hldownstroke2"left="1"right="1"top="1"bottom="1"includeIn="down"><s:stroke><s:LinearGradientStrokerotation="90"weight="1"><s:GradientEntrycolor="0x000000"alpha="0.09"ratio="0.0"/><s:GradientEntrycolor="0x000000"alpha="0.00"ratio="0.0001"/></s:LinearGradientStroke></s:stroke></s:Rect><s:HGroupleft="7"right="7"top="5"bottom="5"gap="8"verticalAlign="middle"><s:BitmapImagesource="54.gif"/><!-- layer 7: Container for labelDisplay:TextBase --><!--- Defines the size and location of the labelDisplay visual element.
<p>The <code>labelDisplay</code> is added to this Group by the renderer's
<code>prepare()</code> method. Any size/location constraints
specified by the labelDisplay
define its layout relative to the labelDisplayGroup.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
--><s:Groupid="labelDisplayGroup"width="100%"/><!-- layer 8: Container for sortIndicator:IVisualElement --><!--- Defines the size and location of the sortIndicator visual element.
<p>The <code>sortIndicator</code> is added to this Group by the renderer's
<code>prepare()</code> method. Any size/location constraints specified
by the sortIndicator
define its layout relative to the sortIndicatorGroup. This Group is only
included in the layout when the sortIndicator is visible.</p>
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 2.0
@productversion Flex 4.5
--><s:Groupid="sortIndicatorGroup"includeInLayout="false"/></s:HGroup></s:GridItemRenderer>
Et ensuite l'utiliser dans votre grille de données, il suffit de suivre Constantiner exemple:
Il n'est pas au travail Étincelle DataGrid 🙁 J'ai totalement raté la partie sur l'utilisation de la Spark grille de données. Suppose que je vais devoir retourner à la planche à dessin! 🙂 OK, j'ai repris et mis à jour de ma réponse. 🙂
L'exemple de rendu avec une seule ligne d'en-tête peut être fondée ici {flex4.5 SDK root}/frameworks/projects/spark/src/spark/skins/spark/DefaultGridHeaderRenderer.mxml.
Je ne vois pas headerRenderer propriété de GridColumn dans le sdk, je suis en utilisant ce que je ne pouvais pas accepter les autres réponses. C'était ma solution:
MultiLineColumnHeaderRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?><s:ItemRendererxmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"autoDrawBackground="true"><fx:Script>
<![CDATA[
import spark.components.supportClasses.GridColumn;
]]>
</fx:Script><s:TextAreaeditable="false"text="{(data as GridColumn).headerText}"/></s:ItemRenderer>
Une fonction init dans la vue avec la grille de données:
Vous avez à faire cela:
-Créer un personnalisé SparkDatagrid Peau en créant une copie de celui par défaut
-Créer une grille de données personnalisé HeaderRenderer
-Il suffit de créer un nouveau GridItemRenderer (A) et de mettre le code de la valeur par défaut DataGridHeaderRenderer à l'intérieur de la nouvelle GridItemRenderer (A)
-Allez dans le label "labelDisplay" à l'intérieur d'Un et modifiez sa propriété "maxDisplayedLines" de 1 à 2
-Maintenant, retournez-vous personnalisé Étincelle Satagrid de la Peau et de la recherche pour "headerRenderer".
-La remplacer par une instance de votre personnalisé GridItemRender (A)
Il a travaillé pour moi...j'espère en fera de même pour vous
si vous regardez le code à l'intérieur de la DefaultGridHeaderRenderer composant, vous verrez qu'une fois réglé, il modifie la valeur du labelDisplay
Mais, si vous avez un grand nombre de colonnes, et il peut être ennuyeux de mettre le même code beaucoup de temps, il suffit de créer un nouveau composant qui s'étend de l'étincelle Datagrid (ou des nids en fonction de votre besoin), puis mettez le code :
De développer Constantiner réponse, vous devrez créer un personnalisé
HeaderRenderer
et définir laLabel
'smaxDisplayedLines
à 2. Voici un exemple de rendu que j'ai trouvé:MyRenderer.mxml
Et ensuite l'utiliser dans votre grille de données, il suffit de suivre Constantiner exemple:
J'ai totalement raté la partie sur l'utilisation de la Spark grille de données. Suppose que je vais devoir retourner à la planche à dessin! 🙂
OK, j'ai repris et mis à jour de ma réponse. 🙂
OriginalL'auteur Jason Towne
Essayez d'utiliser des
headerRenderer
la manière suivante:L'exemple de rendu avec une seule ligne d'en-tête peut être fondée ici
{flex4.5 SDK root}/frameworks/projects/spark/src/spark/skins/spark/DefaultGridHeaderRenderer.mxml
.OriginalL'auteur Constantiner
Je ne vois pas
headerRenderer
propriété de GridColumn dans le sdk, je suis en utilisant ce que je ne pouvais pas accepter les autres réponses. C'était ma solution:MultiLineColumnHeaderRenderer.mxml:
Une fonction init dans la vue avec la grille de données:
Et à l'aide de
dans leheaderText
pour la GridColumn:
morceau dans ma réponse originale à cette question et l'a édité. LOLOriginalL'auteur Brandon
Faire une copie de la DataGridSkin et le placer dans votre code source. Puis Modifier la Ligne 154 -
Espère que cette aide,
Riche
OriginalL'auteur Rich Oren
Vous avez à faire cela:
-Créer un personnalisé SparkDatagrid Peau en créant une copie de celui par défaut
-Créer une grille de données personnalisé HeaderRenderer
-Il suffit de créer un nouveau GridItemRenderer (A) et de mettre le code de la valeur par défaut DataGridHeaderRenderer à l'intérieur de la nouvelle GridItemRenderer (A)
-Allez dans le label "labelDisplay" à l'intérieur d'Un et modifiez sa propriété "maxDisplayedLines" de 1 à 2
-Maintenant, retournez-vous personnalisé Étincelle Satagrid de la Peau et de la recherche pour "headerRenderer".
-La remplacer par une instance de votre personnalisé GridItemRender (A)
Il a travaillé pour moi...j'espère en fera de même pour vous
mARCO
OriginalL'auteur
Ou,
si vous ne voulez pas créer un nouveau moteur de Rendu juste pour 1 biens, il vous suffit de définir les propriétés comme ceci :
si vous regardez le code à l'intérieur de la
DefaultGridHeaderRenderer
composant, vous verrez qu'une fois réglé, il modifie la valeur du labelDisplayMais, si vous avez un grand nombre de colonnes, et il peut être ennuyeux de mettre le même code beaucoup de temps, il suffit de créer un nouveau composant qui s'étend de l'étincelle Datagrid (ou des nids en fonction de votre besoin), puis mettez le code :
OriginalL'auteur LE GALL Benoît