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

来源：互联网发布：知乎 dota2 编辑：程序博客网时间：2024/06/06 07:42

创建一个主应用程序，采用动态赋值给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>

运行结果
这里写图片描述

0 0