使用MXDataGridItemRenderer组件为DataGrid自定义显示模式

MXDataGridItemRenderer 类定义 Spark 项呈示器类，以便与 MX DataGrid 控件一起使用。通过该类，可以将 Spark 项呈示器体系结构与 MX DataGrid 控件一起使用。

 

1.首先新建一个MXML 项目 呈现器  在模板中选择  DataGrid 代码如下:

<?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" focusEnabled="true"> <s:HGroup> <s:Label top="0" left="0" right="0" bottom="0" text="{data.name}" /> <s:Label top="0" left="0" right="0" bottom="0" text="{data.email}" /> </s:HGroup> </s:MXDataGridItemRenderer>

 

2.使用这个项目呈现器 也成为渲染器
<?xml version="1.0" encoding="utf-8"?> <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" minWidth="955" minHeight="600"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <s:XMLListCollection id="eList" > <fx:XMLList> <employee> <name>刘德华</name> <phone>555-219-2270</phone> <email>liudehua@qq.com</email> </employee> <employee> <name>张曼玉</name> <phone>555-219-2012</phone> <email>zhangmanyu@qq.com</email> </employee> <employee> <name>郭富城</name> <phone>555-219-2012</phone> <email>guofucheng@qq.com</email> </employee> <employee> <name>赵薇</name> <phone>555-219-2000</phone> <email>zhaowei@qq.com</email> </employee> </fx:XMLList> </s:XMLListCollection> </fx:Declarations> <mx:DataGrid x="22" y="359" dataProvider="{eList}" width="562"> <mx:columns> <mx:DataGridColumn headerText="中文名" minWidth="200" itemRenderer="component.dgItemRenderer"> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </s:Application>

 

3. 你也可以直接写在DataGridColumn 里面 效果完全一样 完整代码如下
<?xml version="1.0" encoding="utf-8"?> <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" minWidth="955" minHeight="600"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Declarations> <s:XMLListCollection id="eList" > <fx:XMLList> <employee> <name>刘德华</name> <phone>555-219-2270</phone> <email>liudehua@qq.com</email> </employee> <employee> <name>张曼玉</name> <phone>555-219-2012</phone> <email>zhangmanyu@qq.com</email> </employee> <employee> <name>郭富城</name> <phone>555-219-2012</phone> <email>guofucheng@qq.com</email> </employee> <employee> <name>赵薇</name> <phone>555-219-2000</phone> <email>zhaowei@qq.com</email> </employee> </fx:XMLList> </s:XMLListCollection> </fx:Declarations> <mx:DataGrid x="23" y="180" dataProvider="{eList}" width="562"> <mx:columns> <mx:DataGridColumn headerText="中文名" minWidth="200"> <mx:itemRenderer> <fx:Component> <s:MXDataGridItemRenderer> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Label text="{data.name}"></s:Label> <s:Label text="{data.email}"></s:Label> </s:MXDataGridItemRenderer> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </s:Application>

 

注意 如果要在 MX组件里 使用SPARK组件 要使用 MXDataGridItemRenderer 或 MXItemRenderer