flex对datagrid列表添加图片文本 itemRender

创建一个主应用程序，采用动态赋值给datagrid

<?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" creationComplete="init(event)" > <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> <mx:HTTPService id="dataXmlService" resultFormat="xml" result="dataXmlToData(event)"/> </fx:Declarations> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.FlexEvent; import mx.rpc.events.ResultEvent; import Factory.StatusFactory; private var itemRenderImg :IFactory = new StatusFactory();//实例化一个itemrenderer private var dataXml: XML; protected function init(event:FlexEvent):void { // TODO Auto-generated method stub dataXmlService.url="students.xml";//请求地址 try { dataXmlService.send(); } catch(error:Error) { Alert.show("请求出错"); } } protected function dataXmlToData(event:ResultEvent):void { // TODO Auto-generated method stub dataXml=XML(event.result);//请求的数据结果 grid.dataProvider = dataXml.children(); column.itemRenderer = itemRenderImg;//将itemrender赋给序号所在的列 } ]]> </fx:Script> <mx:DataGrid id="grid" width="500" height="400" textAlign="center"> <mx:columns> <mx:DataGridColumn headerText="序号" dataField="col1" textAlign="left" id="column"/> <mx:DataGridColumn headerText="姓名" dataField="@col2"/> <mx:DataGridColumn headerText="年龄" dataField="@col3"/> <mx:DataGridColumn headerText="爱好" dataField="@col4"/> <mx:DataGridColumn headerText="住址" dataField="@col5"/> </mx:columns> </mx:DataGrid> </s:Application>

statusFactory.as

package Factory { import mx.core.IFactory; public class StatusFactory implements IFactory { public function StatusFactory() { super(); } public function newInstance():*{ //实例化渲染器，实现具体功能 return new statusItemRender;//返回一个itemrender实例 } } }

statusItemRender

<?xml version="1.0" encoding="utf-8"?> <mx:HBox 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:Declarations> <fx:Script> <![CDATA[ [Embed(source="assets/1.jpg")] private static const you : Class; [Embed(source="assets/2.jpg")] private static const liang:Class; [Embed(source="assets/3.jpg")] private static const cha : Class; [Embed(source="assets/4.jpg")] private static const hao : Class; private function getImage(data : Object):Object{ if(data==null) return null; if("2101"==data.@col1){return you;} if("2102"==data.@col2){return liang;} if("2103"==data.@col3){return cha;} return hao; } private function getText(data:Object):String{ if(data==null) return null; if("2101"==data.@col1){return "优秀";} if("2102"==data.@col2){return "良好";} if("2103"==data.@col3){return "差劲";} return "好"; } ]]> </fx:Script> <s:Label id="serial" text="{this.data.@col1}"/> <s:Image id="stateImg" source="{getImage(this.data)}" width="20" height="20"/> <s:Label id="stateText" text="{getText(this.data)}"/> </mx:HBox>

运行结果