Geek asks and answers

Flex: how to control alignment of Spark datagrid headers?

If I have 10 columns in a datagrid Spark, and some headers need to be left justified, some headers have a legal value and some have the center, what is the easiest way to accomplish this?

Assuming a custom headerRenderer attribute is needed, are there any simple examples that might help me?

Thanks in advance for any comments.

+3
source share
2 answers

The easiest way to find this is to override the settings in the spark case DefaultGridHeaderRenderer, as described in this link:

http://flexponential.com/2011/10/30/changing-fontweight-of-spark-datagrid-headers/

, , : myRightHeaderRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer 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>
    <s:Label id="labelDisplay" 
             verticalCenter="1" left="0" right="0" top="0" bottom="0"
             verticalAlign="middle"
             maxDisplayedLines="1"
             textAlign="right"
             fontWeight="bold"
             showTruncationTip="true" />
</fx:Declarations>

</s:DefaultGridHeaderRenderer>

. , Spark DataGrid :

...
<fx:Array>
    <s:GridColumn ... />
    <s:GridColumn headerRenderer="myRightHeaderRenderer" ...>
    <s:GridColumn ... />
    ...
</fx:Array>
...

, , , , textAlign center, left right.

+4

, , , .

, , , . , headerRenderer, . , , - , .

package
{
    import spark.skins.spark.DefaultGridHeaderRenderer;

    public class CustomGridHeader extends DefaultGridHeaderRenderer
    {
        public function CustomGridHeader()
        {
            super();
        }

        public function set headerTextAlign(value:String):void
        {
            labelDisplay.setStyle("textAlign",value);
            labelDisplay.styleChanged("textAlign");
        }
    }
}

, ...

[Bindable] private var leftFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var rightFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var centerFactory:ClassFactory = new ClassFactory(CustomGridHeader);

. initialize preinitialize...

leftFactory.properties = {headerTextAlign: "left"};
rightFactory.properties = {headerTextAlign: "right"};
centerFactory.properties = {headerTextAlign: "center"};

...

<s:GridColumn headerText="..." headerRenderer="{centerFactory}"/>
+2

More articles:


All Articles