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>

运行结果