ItemRenderer contentBackgroundColor

Question

我需要一些代码的urget帮助。我使用flex builder 3，我需要突出显示具有符号"A，B，C，D，E，F，G，H，I，G，K，L“的内容，我需要在我的列表中用一些颜色突出显示它们。我不知道在我的情况下该怎么做。，I‘t know how to do this, some people say that i need to use itemRender, but i don’我不知道该怎么做。代码如下：

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

            [Bindable]                
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Alexey", Visble:false},
                {label1:"A", Visibe:true},     
                {label1:"B", Visibe:true},     
                {label1:"C", Visibe:true},     
                {label1:"D", Visibe:true},     
                {label1:"E", Visibe:true},     
                {label1:"F", Visibe:true},     
                {label1:"G", Visibe:true},     
                {label1:"H", Visibe:true},     
                {label1:"I", Visibe:true},     
                {label1:"G", Visibe:true},     
                {label1:"K", Visibe:true},     
                {label1:"L", Visibe:true},     

                {label1:"Bill", Visibe:false},     
                {label1:"Den", Visibe:false},     
                {label1:"Dima", Visibe:false},     
                {label1:"Kolya", Visibe:false},     
                {label1:"Vasya", Visibe:false},     
                {label1:"Sergei", Visibe:false},     
                {label1:"Petya", Visibe:false},     
                {label1:"Alina", Visibe:false},     
                {label1:"Dina", Visibe:false},     
                {label1:"Vlada", Visibe:false},     
                {label1:"Tolya", Visibe:false},     
                {label1:"Sasha", Visibe:false}     

            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        x="100"
        y="200"
        width="300"
        height="200"
        variableRowHeight="false" 
        editable="false">

        <mx:columns>
            <mx:DataGridColumn dataField="label1" editorDataField="text" headerText="Name">

            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid> 


</mx:Application>

谢谢。

Answer 1

您可以尝试如下所示：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
            layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        public var letters:String = "ABCDEFGHIGKL";

        [Bindable]                
        private var myDP:ArrayCollection = new ArrayCollection([
            {label1:"Alexey", visible:false},
            {label1:"A", visible:true},     
            {label1:"B", visible:true},     
            {label1:"C", visible:true},     
            {label1:"D", visible:true},     
            {label1:"E", visible:true},     
            {label1:"F", visible:true},     
            {label1:"G", visible:true},     
            {label1:"H", visible:true},     
            {label1:"I", visible:true},     
            {label1:"G", visible:true},     
            {label1:"K", visible:true},     
            {label1:"L", visible:true},     

            {label1:"Bill", visible:false},     
            {label1:"Den", visible:false},     
            {label1:"Dima", visible:false},     
            {label1:"Kolya", visible:false},     
            {label1:"Vasya", visible:false},     
            {label1:"Sergei", visible:false},     
            {label1:"Petya", visible:false},     
            {label1:"Alina", visible:false},     
            {label1:"Dina", visible:false},     
            {label1:"Vlada", visible:false},     
            {label1:"Tolya", visible:false},     
            {label1:"Sasha", visible:false}     

        ]);      
    ]]>
</mx:Script>

<mx:DataGrid id="myDG" dataProvider="{myDP}" 
             x="100"
             y="200"
             width="300"
             height="200"
             variableRowHeight="false" 
             editable="false">

    <mx:columns>
        <mx:DataGridColumn dataField="label1" editorDataField="text" headerText="Name">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox horizontalGap="0">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void 
                                {
                                    super.data = value;

                                    var isInLetters:Boolean = false;

                                    for (var i:int = 0; i < outerDocument.letters.length; i++)
                                    {
                                        if (outerDocument.letters.charAt(i) == (data.label1 as String).charAt(0))
                                        {
                                            laFirst.setStyle("color", "0xff0000");
                                            laFirst.setStyle("fontWeight", "bold");

                                            isInLetters = true;
                                            break;
                                        }
                                    }
                                    if (!isInLetters)
                                    {
                                        laFirst.setStyle("color", "0x000000");
                                        laFirst.setStyle("fontWeight", "normal");
                                    }
                                }
                            ]]>
                        </mx:Script>

                        <mx:Label id="laFirst"  text="{String(data.label1).charAt(0)}" paddingRight="0"/>
                        <mx:Label text="{String(data.label1).substr(1, String(data.label1).length - 1)}" paddingLeft="-11"/>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid> 

</mx:Application>

​

​

Answer 2

您将需要创建自己的单元格渲染器。

下面是一些例子：

• here - detailed
• here - better - but in French

在行级别进行更改要容易得多，因为您可以将整个datagrid子类化。