Flex DataGrid Header 列分隔符
Flex DataGrid Header Column Separator
我正在使用 mx:DataGrid(在 Halo 主题中),header 列 separators/vertical 网格线颜色。有谁知道如何 customize/change 线条颜色?
谢谢!
--萌
Datagrid 有两种样式 horizontalSeparatorSkin and verticalSeparatorSkin 您可以覆盖它们。看来你需要覆盖后者。
<mx:DataGrid id="grid" verticalGridLines="true" verticalSeparatorSkin="{VerticalSeparatorSkin}">
<mx:columns>
<mx:DataGridColumn dataField="lbl" />
<mx:DataGridColumn dataField="val"/>
</mx:columns>
</mx:DataGrid>
现在您可以将此 class 写为:
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);
}
}
这应该可以完成工作。另一种选择是自定义数据网格本身。
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);
}
}
然后可以用它代替常规 DataGrid
。
我正在使用 mx:DataGrid(在 Halo 主题中),header 列 separators/vertical 网格线颜色。有谁知道如何 customize/change 线条颜色?
谢谢!
--萌
Datagrid 有两种样式 horizontalSeparatorSkin and verticalSeparatorSkin 您可以覆盖它们。看来你需要覆盖后者。
<mx:DataGrid id="grid" verticalGridLines="true" verticalSeparatorSkin="{VerticalSeparatorSkin}">
<mx:columns>
<mx:DataGridColumn dataField="lbl" />
<mx:DataGridColumn dataField="val"/>
</mx:columns>
</mx:DataGrid>
现在您可以将此 class 写为:
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);
}
}
这应该可以完成工作。另一种选择是自定义数据网格本身。
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);
}
}
然后可以用它代替常规 DataGrid
。