DataGrid & verticalAlign = middle

[BregoXX]

Наблюдаю загадочное поведение DataGrid, если выставляю ему verticalAlign в middle и добавляю на колокну кастомный рендерер, которое заключаеться в битой строке - там где колонка с рендерором высота строки больше, чем в высота строки в других колонках. Что за действо хитрое и как пофиксить нормально.

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo DataGrid control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Declarations>
		<fx:XMLList id="employees">
			<employee>
				<name>Christina Coenraets</name>
				<phone>555-219-2270</phone>
				<email>ccoenraets@fictitious.com</email>
				<kei>0.5</kei>
				<active>true</active>
			</employee>
			<employee>
				<name>Joanne Wall</name>
				<phone>555-219-2012</phone>
				<email>jwall@fictitious.com</email>
				<kei>0.5</kei>
				<active>true</active>
			</employee>
		</fx:XMLList>
	</fx:Declarations>
 
	<s:Panel title="Halo DataGrid Control Example"
			 width="75%" height="75%" 
			 horizontalCenter="0" verticalCenter="0">
		<s:VGroup left="10" right="10" top="10" bottom="10">
			<s:Label width="100%" color="blue"
					 text="Select a row in the DataGrid control."/>
 
			<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}" rowHeight="50" verticalAlign="middle">
				<mx:columns>
					<mx:DataGridColumn dataField="name" headerText="Name"/>
					<mx:DataGridColumn dataField="phone" headerText="Phone"/>
					<mx:DataGridColumn dataField="email" headerText="Email"/>
					<mx:DataGridColumn dataField="kei" headerText="KEi" itemRenderer="KEIRenderer"/>
				</mx:columns>
			</mx:DataGrid>
 
			<mx:Form width="100%" height="100%">
				<mx:FormItem label="Name">
					<mx:Label text="{dg.selectedItem.name}"/>
				</mx:FormItem>
				<mx:FormItem label="Email">
					<mx:Label text="{dg.selectedItem.email}"/>
				</mx:FormItem>
				<mx:FormItem label="Phone">
					<mx:Label text="{dg.selectedItem.phone}"/>
				</mx:FormItem>
			</mx:Form>
		</s:VGroup>
	</s:Panel>
 
</s:Application>

и рендерер

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
    <fx:Script>
        <![CDATA[
 
        import mx.controls.dataGridClasses.DataGridListData;
 
        override public function set data(value:Object):void {
            super.data = value;
            if (data) {
                updateInfo();
            }
        }
 
        private function updateInfo():void {
            if (data[DataGridListData(listData).dataField]) {
                colorMarker.color = 0xFFFF00;
                kei.text = Number(data[DataGridListData(listData).dataField]).toFixed(3);
            }
        }
        ]]>
    </fx:Script>
    <s:Group width="100%" height="100%" clipAndEnableScrolling="true">
        <s:Label right="{rect.height + 2}" verticalCenter="0" id="kei"/>
        <s:Rect top="-1" bottom="-1" width="{rect.height}" right="0" id="rect">
            <s:fill>
                <s:SolidColor id="colorMarker"/>
            </s:fill>
        </s:Rect>
    </s:Group>
</s:MXDataGridItemRenderer>