Flex中dataGrid应用：显示图片和文字

来源：互联网发布：九江市美工招人单位编辑：程序博客网时间：2024/06/05 14:54

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:viewer="com.esri.viewer.*"
       xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:circle="com.wonders.circle.*"
       xmlns:comp="com.esri.viewer.components.*"
       xmlns:Query="widgets.Query.*"
       width="150" height="240"   creationComplete="LegendWdg_creationCompleteHandler(event)">
<fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Image;
   import mx.events.FlexEvent;

   [Bindable]
   [Embed(source="assets/images/globe.png")]
   public var imgObject:Class;

   [Bindable]
   [Embed(source="assets/images/cn.png")]
   public var imgObject2:Class;

   [Bindable]
   [Embed(source="assets/images/i_redcross.png")]
   public var imgObject3:Class;

   [Bindable]
   [Embed(source="assets/images/i_resources.png")]
   public var imgObject4:Class;


      private var dataProvider:ArrayCollection;

protected function LegendWdg_creationCompleteHandler(event:FlexEvent):void
  {
    dataProvider=new ArrayCollection([{image1:imgObject,content:"一级"},{image1:imgObject2,content:"二级"},{image1:imgObject3,content:"三级"},{image1:imgObject4,content:"四级"}]);
    legendDG.dataProvider=dataProvider;
  }
  ]]>
</fx:Script>
<viewer:WidgetTemplate width="150" height="240">
  
  <s:HGroup width="100%" height="100%">
   <mx:DataGrid id="legendDG" height="100%" width="100%" >
    <mx:columns>
     <mx:DataGridColumn headerText="图例" dataField="image">
      <mx:itemRenderer>
       <fx:Component>
        <mx:Image   height="20" source="{data.image1}">
        </mx:Image>
       </fx:Component>
      </mx:itemRenderer>
     </mx:DataGridColumn>
     <mx:DataGridColumn headerText="级别" dataField="content">
     </mx:DataGridColumn>
    </mx:columns>
   </mx:DataGrid>
  </s:HGroup>
</viewer:WidgetTemplate>
</viewer:BaseWidget>