Styling sowohl Vordergrund-und hintergrund-Auswahl Farbe in einem Flex-Liste/datagrid

Flex stellt eine "selectionColor" CSS-Eigenschaft für das styling der hintergrund Farbe einer ausgewählten Liste/datagrid. Aber ich kann nicht herausfinden, wie man den Stil der Vorder-oder text Farbe der ausgewählten Liste. Es scheint, Sie können nur ändern Sie die Vordergrundfarbe für alle Zeilen.

So, zum Beispiel, dass ich wollte ein sehr dunkles Auswahl der hintergrund-Farbe und eine sehr leichte deaktiviert hintergrund-Farbe. Sie würden ähnlich wollen eine Licht-text-Farbe für die Auswahl und eine dunkle Textfarbe deaktiviert.

Ich weiß, ich könnte dies mit einer benutzerdefinierten Elementrenderer, aber das scheint mir eher albern. Der Punkt ist, um Stil alle Listen/datagrids in meiner app. Ich will nicht zu haben, um einen benutzerdefinierten Elementrenderer oder erweitern Datagrid für jeden Ort, den ich verwenden. Beachten Sie, dass ich mit Flex 4 und bin bereit zum verwenden von skins aber ich weiß nicht, ob das bedeutet, dass alles, was in Anbetracht DataGrid ist nicht sparkified noch.

InformationsquelleAutor Matt Hughes | 2010-10-15

  1. 3

    Flex 3 textRollOverColor und textSelectedColor aber Flex 4-Komponenten nicht unterstützt Sie nicht mehr.

    Das folgende Beispiel zeigt dies + das hinzufügen der Unterstützung für diese Farben für eine spark-List:

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

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        global
        {
            textRollOverColor: yellow;
            textSelectedColor: green;
        }

    </fx:Style>

    <fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        private function getListDataProvider():ArrayCollection
        {
            return new ArrayCollection([ "Item 1", "Item 2", "Item 3"]);
        }

        private function getGridDataProvider():ArrayCollection
        {
            return new ArrayCollection([ { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" } ]);
        }

    ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>

    <s:List dataProvider="{getListDataProvider()}"/>

    <s:List dataProvider="{getListDataProvider()}" itemRenderer="ColoredItemRenderer"/>

    <mx:List dataProvider="{getListDataProvider()}"/>

    <mx:DataGrid dataProvider="{getGridDataProvider()}"/>

</s:Application>

    ColoredItemRenderer:

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

    <fx:Script>
    <![CDATA[

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var color:uint;
            if (selected)
                color = getStyle("textSelectedColor");
            else if (hovered)
                color = getStyle("textRollOverColor");
            else
                color = getStyle("color");
            sparkLabel.setStyle("color", color);
        }

    ]]>
    </fx:Script>

    <s:Label id="sparkLabel" text="{data}"/>

</s:ItemRenderer>
    Ich habe Ihren code benutzt, um mir zu helfen umgehen, ein Lahmen bug (Overridebase-Fehler) in SAP-Dashboards SDK, wenn Sie versuchen, eine benutzerdefinierte ItemRenderer-mit einem Funken label mit Staaten - überschreiben updateDisplayList wie Sie in Ihrer Methode funktionierte perfekt!
    Das funktioniert nicht mit der Spark-DataGrid-weil die updateDisplayList-Methode wird nur einmal aufgerufen. Auch, es wirft einen Fehler, da muss es eine IGridItemRenderer so erweitern von GridItemRenderer. Ich habe eine Antwort für DataGrid unten.

    InformationsquelleAutor Maxim Kachurovskiy

  2. 2

    Hier ist ein Beispiel, wie es in Flex 4 mit Staaten und itemRenders

    <s:List itemRenderer="com.renderer.GlossaryRenderer" change="handleGridClick(event)" width="293" height="206" styleName="glossaryList" dataProvider="{_glossary}">
    <s:layout>
        <s:VerticalLayout horizontalAlign="justify" paddingLeft="5" requestedRowCount="9" />
    </s:layout>
</s:List>

    Konnte Sie richten Sie Ihre Elementrenderer wie diese

    <?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="false">
<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
<s:Label id="sparkLabel" backgroundColor.selected="#ff0000" color.selected="#FFFFFF" color.hovered="#FFFFFF" text="{data.word}" left="2" right="2" top="4" bottom="4" />
</s:ItemRenderer>

    InformationsquelleAutor abritez

  3. 1

    Für Spark-DataGrid erstellen Sie einen neuen Elementrenderer basierend auf GridItemRenderer. Dann weisen, dass der DataGrid itemRenderer-Eigenschaft.

    MyGridItemRender.mxml: 

    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"  
            width="100%"
            height="100%">

    <fx:Script>
        <![CDATA[

            override public function prepare(hasBeenRecycled:Boolean):void {
                super.prepare(hasBeenRecycled);

                var styleClient:IStyleClient = owner as IStyleClient;
                var color:uint;

                if (selected && styleClient.getStyle("textSelectionColor")!==undefined) {
                    color = styleClient.getStyle("textSelectionColor");
                }
                else if (selected && styleClient.getStyle("textSelectedColor")!==undefined) {
                    color = styleClient.getStyle("textSelectedColor");
                }
                else if (hovered && styleClient.getStyle("textRollOverColor")!==undefined) {
                    color = styleClient.getStyle("textRollOverColor");
                }
                else {
                    color = styleClient.getStyle("color");
                }

                labelDisplay.setStyle("color", color);
            }

        ]]>
    </fx:Script>

    <s:Label id="labelDisplay" 
             paddingLeft="3" paddingRight="3" 
             paddingTop="5" paddingBottom="5"
             verticalCenter="2"
             left="2"/>

</s:GridItemRenderer>

    Code: 

    <s:DataGrid id="dataGrid" itemRenderer="MyGridItemRenderer"/>

    Können Sie auch diese DataGrid, die es in sich hat standardmäßig aktiviert.

    InformationsquelleAutor 1.21 gigawatts

Schreibe einen Kommentar