文章摘要
该文章描述了一个使用Flex MXDataGridItemRenderer组件的示例，展示了如何在Flex项目中集成和使用MXDataGridItemRenderer。文章详细解释了组件的结构和属性，特别是`mxitemrenderer1_creationCompleteHandler`事件处理器，该处理器负责处理Flex事件并分割数据GridListData的label属性值。此外，文章还展示了如何将分割后的数据显示在两个Label组件中，并通过mx:HRule创建了一个分隔线。整体文章重点介绍了如何利用Flex组件和JavaScript脚本来实现数据网格的动态绑定和展示功能。
<?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%”
autoDrawBackground=”false”
creationComplete=”mxitemrenderer1_creationCompleteHandler(event)”
>
<s:layout>
<s:VerticalLayout verticalAlign=”middle” horizontalAlign=”center”/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Text;
import mx.events.FlexEvent;
protected function mxitemrenderer1_creationCompleteHandler(event:FlexEvent):void
{
var txt1:String=lbl.text.split(“,”)[0];
var txt2:String=lbl.text.split(“,”)[1];
lbl1.text=txt1;
lbl2.text=txt2;
}
]]>
</fx:Script>
<fx:Declarations>
<!– 将非可视元素（例如服务、值对象）放在此处 –>
</fx:Declarations>
<s:Label id=”lbl” text=”{dataGridListData.label}” visible=”false” height=”0″/>
<s:VGroup id=”vp” width=”100%” height=”100%” gap=”2″ >
<s:Label id=”lbl1″ color=”0x000000″ textAlign=”center” verticalAlign=”middle” width=”100%”/>
<mx:HRule width=”100%” chromeColor=”0x999999″ alpha=”0.3″/>
<s:Label id=”lbl2″ color=”0x000000″ textAlign=”center” verticalAlign=”middle” width=”100%”/>
</s:VGroup>
</s:MXDataGridItemRenderer>