2009.06.30 16:25 COMPUTING/SCRIPTING
flex arraycollection binding on datagrid with image
아직 하는사람이 많지 않아 한참을 뒤져서 겨우 알아냈습니다.
환경은 air 어플리케이션입니다.

- arraycollection으로 datagrid에 바인딩합니다.
- 특정 행에 대해 이미지를 추가할 수 있습니다. (이미지 클래스는 일단 테스트로 하나 넣어봤습니다.)
- 디자인을 입힐땐 그리드틀이 필요하지 않기때문에 경계선과 헤더를 없애고, 오버컬러를 일단 빨간색으로 변경
- 토글버튼으로 특정 컬럼을 온/오프 할수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute" initialize="onInitialize()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var acPlaylist:ArrayCollection=new ArrayCollection([{first:"ahn",last:"doori"},{first:"kaudo",last:"뒤질래"}]);
[Bindable][Embed(source='../assets/rss.png')] private var imgRss:Class;
private var objItem:Object=[{first:"ㅎㅎㅎㅎ}",last:"ㅍㅍㅍㅍ"}];
private function onInitialize():void{
for(var i:uint=0;i<10;i++){
   acPlaylist.addItem({first:"Twelve",last:"zzzzz",cover:imgRss});
  }
 }
]]>
</mx:Script>
<mx:DataGrid dataProvider="{acPlaylist}" headerHeight="0" backgroundAlpha="0" borderStyle="none"
 verticalGridLines="false" horizontalGridLines="false" rollOverColor="red" selectionColor="white">
 <mx:columns>
 <mx:DataGridColumn dataField="first"/>
 <mx:DataGridColumn id="last" dataField="last" visible="false"/>
 <mx:DataGridColumn dataField="cover">
  <mx:itemRenderer><mx:Component>
   <mx:HBox paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" horizontalAlign="center" verticalAlign="middle">
   <mx:Image height="40" width="40" source="{data.cover}"/>
   </mx:HBox>
  </mx:Component></mx:itemRenderer>
 </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>
<mx:Button label="Toggle Column" click="last.visible=!last.visible;"  x="350" y="40"/>
</mx:WindowedApplication>

댓글을 달아 주세요

  1. 큰 도움이 되는 포스팅 감사해요
    안잊어버리려구 링크 건곳으로 담아갑니다

    2009.07.24 14:18 신고 [ ADDR : EDIT/ DEL : REPLY ]

최근에 올라온 글

최근에 달린 댓글