項目渲染器內容背景顏色

Question

我需要一些代碼的幫助。我使用flex builder 3，我需要突出顯示符號爲「A，B，C，D，E，F，G，H，I，G，K，L」的內容，並且我需要使它們突出顯示我的列表中有一些顏色。我不知道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

行級修改同樣是因爲你也可以繼承整個數據網格容易得多。