今天做一个报表，由于有很多数据列，单个页面的宽度显示不下，而这些数据列又有很多数据是相关的，所以就想把这些相关的数据合并显示（通过cellRenderer），但是合并后数据表头的说明就比较长，考虑如果表头可以显示多行就好了，在这样的考虑下就直接催生了这个多行表头显示器（MultipleLineHeaderRender）的诞生。具体效果如下：

主mxml代码:

<render:YpslDataGridColumn
	headerRenderer="{com.eshangrao.ui.renderer.MultipleLineHeaderRender}"
	width="100"
	yssl="YFYSL"
	tysl="YFYTYSL"
	sjsl="YFYSJSL"
	textAlign="center"
	cellRenderer="com.eshangrao.ui.renderer.YpslRenderer"
	>
	<mx:headerText>
	<![CDATA[
		<p align="center"><b>已发药<br/>原始/退药/实际</b></p>
	]]>
	</mx:headerText>
</render:YpslDataGridColumn

DataGrid默认的表头的显示使用的是mx.controls.Label组件，因为我们显示多行文本，所以我们这里继承了mx.controls.Text，另外为了达到更好的效果，我们使用的是Text.htmlText属性。

MultipleLineHeaderRender.as

import mx.controls.Text;
class com.eshangrao.ui.renderer.MultipleLineHeaderRender extends Text{

	var lbl : MovieClip;
	var listOwner : MovieClip; //Reference to the parent DataGrid.

	public function createChildren():Void {
  		super.createChildren();
		this.selectable=false;
	}

	public function layoutChildren():Void {
	}

	function setValue(str:String, item:Object, sel:Boolean) : Void {
  		this.htmlText=str;
	}

}

具体HeaderRender的用法参考MM的LiveDocs