Use the mxdatagriditemrenderer component to customize the display mode of the DataGrid

The mxdatagriditemrenderer class defines the spark item display class for use with the MX DataGrid Control. This class allows you to use the spark item display architecture with the MX DataGrid Control.

 

1. Create an mxml project Renderer and select the DataGrid in the template.CodeAs follows:

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: mxdatagriditemrenderer xmlns: FX = "http://ns.adobe.com/mxml/2009" <br/> xmlns: S = "Library: // ns.adobe.com/flex/spark" <br/> xmlns: MX = "Library: // ns.adobe.com/flex/mx" <br/> focusenabled = "true"> <br/> <s: hgroup> <br/> <s: label Top = "0" Left = "0" Right = "0" Bottom = "0" text = "{data. name} "/> <br/> <s: Label Top =" 0 "Left =" 0 "Right =" 0 "Bottom =" 0 "text =" {data. email} "/> <br/> </S: hgroup> <br/> </S: mxdatagriditemrenderer>

 

2. Use this project Renderer to become a Renderer.
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" <br/> xmlns: S = "Library: // ns.adobe.com/flex/spark" <br/> xmlns: MX = "Library: // ns.adobe.com/flex/mx" minwidth = "955" minheight = "600"> <br/> <s: layout> <br/> <s: basiclayout/> <br/> </S: layout> <br/> <FX: declarations> </P> <p> <s: xmllistcollection id = "elist"> <br/> <FX: xmllist> <br/> <employee> <br/> <Name> Andy Lau </Name> <br/> <phone> 555-219-2270 </phone> <br/> <email> liudehua@qq.com </Email> <br/> </employee> <br/> <Name> Zhang manyu </Name> <br/> <phone> 555-219-2012 </phone> <br/> <email> zhangmanyu@qq.com </Email> <br/> </employee> <br/> <employee> <br/> <Name> Guo Fucheng </Name> <br/> <phone> 555-219-2012 </phone> <br/> <email> guofucheng@qq.com </Email> <br/> </employee> <br/> <Name> Zhao Wei </Name> <br/> <phone> 555-219-2000 </ phone> <br/> <email> zhaowei@qq.com </Email> <br/> </employee> <br/> </FX: xmllist> </P> <p> </S: xmllistcollection> </P> <p> </FX: declarations> </P> <p> <mx: dataGrid x = "22" Y = "359" dataprovider = "{elist}" width = "562"> <br/> <mx: columns> <br/> <mx: datagridcolumn headertext = "Chinese name" minwidth = "200" itemrenderer = "component. dgitemrenderer "> <br/> </MX: datagridcolumn> <br/> </MX: columns> <br/> </MX: dataGrid> <br/> </S: Application>

 

3. You can also directly write the code in the datagridcolumn to achieve the same effect. The complete code is as follows:
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <s: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" <br/> xmlns: S = "Library: // ns.adobe.com/flex/spark" <br/> xmlns: MX = "Library: // ns.adobe.com/flex/mx" minwidth = "955" minheight = "600"> <br/> <s: layout> <br/> <s: basiclayout/> <br/> </S: layout> <br/> <FX: declarations> </P> <p> <s: xmllistcollection id = "elist"> <br/> <FX: xmllist> <br/> <employee> <br/> <Name> Andy Lau </Name> <br/> <phone> 555-219-2270 </phone> <br/> <email> liudehua@qq.com </Email> <br/> </employee> <br/> <Name> Zhang manyu </Name> <br/> <phone> 555-219-2012 </phone> <br/> <email> zhangmanyu@qq.com </Email> <br/> </employee> <br/> <employee> <br/> <Name> Guo Fucheng </Name> <br/> <phone> 555-219-2012 </phone> <br/> <email> guofucheng@qq.com </Email> <br/> </employee> <br/> <Name> Zhao Wei </Name> <br/> <phone> 555-219-2000 </ phone> <br/> <email> zhaowei@qq.com </Email> <br/> </employee> <br/> </FX: xmllist> </P> <p> </S: xmllistcollection> </P> <p> </FX: declarations> </P> <p> <mx: dataGrid x = "23" Y = "180" dataprovider = "{elist}" width = "562"> <br/> <mx: columns> <br/> <mx: datagridcolumn headertext = "Chinese name" minwidth = "200"> <br/> <mx: itemrenderer> <br/> <FX: component> <br/> <s: mxdatagriditemrenderer> <br/> <s: layout> <br/> <s: horizontallayout/> <br/> </S: layout> <br/> <s: label text = "{data. name} "> </S: Label> <br/> <s: Label text =" {data. email} "> </S: Label> <br/> </S: mxdatagriditemrenderer> <br/> </FX: component> <br/> </MX: itemrenderer> <br/> </MX: datagridcolumn> <br/> </MX: columns> <br/> </MX: dataGrid> </P> <p> </S: Application>

 

Note: If you want to use the spark component in the MX component, you must use the mxdatagriditemrenderer or mxitemrenderer.