Hello again,
I think I have most of my Flex 3 migration issues worked out, except one
little skinning issue I'm not to sure about. I noticed that the
header-separator-skin in Flex 3 overhangs the bottom of the DataGrid header.
Example
-------------
Flex 2: http://www.allchicorentals.com/
Flex 3: http://acr.openbaseinteractive.com/
I have included the custom DataGrid class as an attachment (note: the only
update from Flex 2 version was in drawRowBackgrounds to start row count at 0
instead of 1, all else is the same).
I tried playing around with different style properties to see if I could
find something to help, but no luck. Any ideas?
Thanks!
~Aaron
package pkg.controls
{
import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.*;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EdgeMetrics;
import mx.core.mx_internal;
import mx.core.FlexSprite;
import mx.core.FlexShape;
import mx.core.UIComponent;
import flash.display.BitmapData;
import mx.core.BitmapAsset;
import mx.controls.Image;
import mx.styles.StyleManager;
use namespace mx_internal;
public class DrawListingsGrid extends DataGrid
{
[Embed(source="../../assets/blueskin/datagrid_bluerow_bg.jpg")]
[Bindable]
public var rowbgCls:Class;
[Embed(source="../../assets/blueskin/gradient_datagrid_bg.jpg")]
//[Embed(source="../../assets/blueskin/login_box.jpg")]
[Bindable]
public var imgCls:Class;
private var displayWidth:Number;
override protected function
drawHeaderBackground(headerBG:UIComponent):void
{
var g:Graphics = headerBG.graphics;
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
g.clear();
var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left +
bm.right);
// Need to extend mask too.
maskShape.width = adjustedWidth;
var hh:Number = rowInfo.length ? rowInfo[0].height :
headerHeight;
// draw diagonal line fill
// g.lineStyle(1, 0x555555, 0.25);
var vdistance:int;
var vstart:int;
var vstartOffset:int;
var vdistanceOffset:int;
/*
for(var i:int = -hh; i < adjustedWidth; i += 5)
{
vstart = Math.max(-i, 0);
vdistance = Math.min(hh, adjustedWidth - i);
vstartOffset = vstart + (3 * Math.random());
g.moveTo(i + vstartOffset, vstartOffset);
g.lineTo(i + vdistance, vdistance + 2 - (4 *
Math.random()));
}*/
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(adjustedWidth, 0);
g.lineTo(adjustedWidth, hh);
// g.lineStyle(0, getStyle("borderColor"), 100);
g.lineTo(0, hh);
g.lineStyle(0, 0x000000, 0);
g.endFill();
}
override protected function drawRowBackgrounds():void
{
if (displayWidth != unscaledWidth - viewMetrics.right -
viewMetrics.left)
{
displayWidth = unscaledWidth -
viewMetrics.right - viewMetrics.left;
}
var rowBGs:Sprite =
Sprite(listContent.getChildByName("rowBGs"));
if (!rowBGs)
{
rowBGs = new FlexSprite();
rowBGs.mouseEnabled = false;
rowBGs.name = "rowBGs";
listContent.addChildAt(rowBGs, 0);
}
var colors:Array;
colors = getStyle("alternatingItemColors");
if (!colors || colors.length == 0)
return;
var curRow:int = 0;
var i:int = 0;
var actualRow:int = verticalScrollPosition;
var n:int = listItems.length;
while (curRow < n)
{
drawRowBackground(rowBGs, i++, rowInfo[curRow].y,
rowInfo[curRow].height, colors[actualRow % colors.length], actualRow);
curRow++;
actualRow++;
}
while (rowBGs.numChildren > i)
{
rowBGs.removeChildAt(rowBGs.numChildren - 1);
}
}
override protected function drawRowBackground(s:Sprite,
rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {
var background:Shape;
if (rowIndex < s.numChildren)
{
background = Shape(s.getChildAt(rowIndex));
}
else
{
background = new FlexShape();
background.name = "background";
s.addChild(background);
}
background.y = y;
// Height is usually as tall is the items in the row, but
not if
// it would extend below the bottom of listContent
var height:Number = Math.min(height,
listContent.height -
y);
//var height:Number = 50;
var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left +
bm.right);
//var g:Graphics = background.graphics;
//g.clear();
//g.beginFill(color, getStyle("backgroundAlpha"));
//g.drawRect(0, 0, displayWidth, height);
//g.endFill();
// var hh:Number = rowInfo.length ? rowInfo[0].height :
headerHeight;
var imgObj:BitmapAsset = new rowbgCls() as BitmapAsset;
var g:Graphics = background.graphics;
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(displayWidth, 0);
g.lineTo(displayWidth, height);
g.lineTo(0, height);
g.lineStyle(0, 0x000000, 0);
g.endFill();
//if (rowColoringFunction != null &&
IList(dataProvider).length > dataIndex) {
// color =
rowColoringFunction(IList(dataProvider).getItemAt(dataIndex), dataIndex, color);
//}
//super.drawRowBackground(s, rowIndex, y, height,
color, dataIndex);
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (displayWidth != unscaledWidth - viewMetrics.right -
viewMetrics.left)
{
displayWidth = unscaledWidth -
viewMetrics.right - viewMetrics.left;
}
}
/**/
}
}
