Séparateur de colonne d'en-tête Flex DataGrid

Question

J'utilise un mx: DataGrid (dans un thème Halo) et je rencontre des problèmes avec les séparateurs de colonne et les couleurs de ligne de quadrillage verticales. Est-ce que quelqu'un sait comment personnaliser/changer la couleur de la ligne?

Merci!

--Moe

Answer 1

Datagrid a deux styles de style horizontalSeparatorSkin et verticalSeparatorSkin que vous pouvez remplacer. Il semble que vous devez remplacer le plus tard.

<mx:DataGrid id="grid" verticalGridLines="true" verticalSeparatorSkin="{VerticalSeparatorSkin}"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="lbl" /> 
      <mx:DataGridColumn dataField="val"/> 
     </mx:columns> 
    </mx:DataGrid> 

vous pouvez maintenant écrire cette classe comme:

public class VerticalSeparatorSkin extends ProgrammaticSkin 
    { 
     public function VerticalSeparatorSkin() 
     { 
      super(); 
     } 

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
     { 
      // draw a line at the bottom of the rectangle defined by 
      // unscaledWidth and unscaledHeight 
      var g:Graphics = this.graphics; 
      g.clear(); 
      g.lineStyle(3, 0x00FF00); // change thickness/color here 
      g.moveTo(0,unscaledWidth); 
      g.lineTo(unscaledWidth, unscaledHeight); 
     } 
    } 

Cela devrait faire le travail. Une autre option consiste à personnaliser le DataGrid lui-même.

public class MyCustomGrid extends DataGrid 
    { 
     public function MyCustomGrid() 
     { 
      super(); 
     } 

     override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void 
     { 
      var contentHolder:ListBaseContentHolder = s.parent.parent as ListBaseContentHolder; 
      var g:Graphics = s.graphics; 
      g.lineStyle(3, color); // change the thickness here 
      g.moveTo(x, 0); 
      g.lineTo(x, contentHolder.height); 
     } 
    } 

Et cela peut être utilisé, à la place de DataGrid régulière.