flex arraycollection binding on datagrid with image
아직 하는사람이 많지 않아 한참을 뒤져서 겨우 알아냈습니다.
환경은 air 어플리케이션입니다.
- arraycollection으로 datagrid에 바인딩합니다.
- 특정 행에 대해 이미지를 추가할 수 있습니다. (이미지 클래스는 일단 테스트로 하나 넣어봤습니다.)
- 디자인을 입힐땐 그리드틀이 필요하지 않기때문에 경계선과 헤더를 없애고, 오버컬러를 일단 빨간색으로 변경
- 토글버튼으로 특정 컬럼을 온/오프 할수 있습니다.
환경은 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>
<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>