| | {section} |
| | {column:width=80%} |
| | |
| | h2. DataGrid |
| | |
| | A DataGrid is a formatted table whose items can be edited and displayed via custom renderers. Features include: |
| | * Resizeable columns |
| | * Customizable columns and row headers |
| | * Editable |
| | * Multiple modes of selection |
| | * Use of custom item renderer |
| | * Paging of data |
| | * Drag and drop capability |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3d.+Displaying+lists+of+items} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Item+Renderers} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | |
| | h6. Learn more |
| | |
| | * {adbe-popup:http://blog.paranoidferret.com/index.php/2007/07/27/flex-friday-feature-datagrid-component/}DataGrid Component{adbe-popup} |
| | * {adbe-popup:http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html}Reference page on LiveDocs{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | horizontalAlign="left" |
| | verticalGap="15" |
| | horizontalGap="15"> |
| | |
| | <mx:Script> |
| | <![CDATA[ |
| | import mx.collections.ArrayCollection; |
| | import mx.rpc.events.ResultEvent; |
| | import mx.rpc.events.FaultEvent; |
| | import mx.controls.Alert; |
| | |
| | [Bindable] |
| | private var photoFeed:ArrayCollection; |
| | |
| | private function requestPhotos():void { |
| | var params:Object = new Object(); |
| | params.format = 'rss_200_enc'; |
| | params.tags = searchTerms.text; |
| | photoService.send(params); |
| | } |
| | |
| | private function photoHandler(event:ResultEvent):void { |
| | photoFeed= event.result.rss.channel.item as ArrayCollection; |
| | | datagrid.dataProvider = photoFeed; |
| | datagrid.visible = true; |
| | | datagrid_id.dataProvider = photoFeed; |
| | datagrid_id.visible = true; |
| | } |
| | |
| | private function faultHandler(event:FaultEvent):void{ |
| | Alert.show(event.fault.faultCode + " , " + event.fault.faultString); |
| | } |
| | |
| | private function showPopup(event:Event):void{ |
| | theImage.source = photoFeed.getItemAt(event.currentTarget.selectedIndex).content.url |
| | desc.text = photoFeed.getItemAt(event.currentTarget.selectedIndex).title.getItemAt(0) |
| | popup.visible = true; |
| | } |
| | |
| | private function hidePopup():void{ |
| | popup.visible = false; |
| | popup.includeInLayout = false; |
| | } |
| | ]]> |
| | </mx:Script> |
| | |
| | |
| | <mx:HTTPService id="photoService" |
| | url="http://api.flickr.com/services/feeds/photos_public.gne" |
| | result="photoHandler(event)" |
| | fault="faultHandler(event)" /> |
| | |
| | <mx:HBox> |
| | <mx:Label text="Enter Search Terms"/> |
| | <mx:TextInput id="searchTerms" enter="requestPhotos()" /> |
| | <mx:Button label="Search" |
| | click="requestPhotos()" /> |
| | </mx:HBox> |
| | |
| | <mx:HBox> |
| | <mx:DataGrid id="datagrid_id" |
| | visible="false" |
| | itemClick="showPopup(event)"> |
| | <mx:columns> |
| | <mx:DataGridColumn dataField="title" headerText="Title" width="100" > |
| | <mx:itemRenderer> |
| | <mx:Component> |
| | <mx:Label text="{data.title.getItemAt(0)}" textAlign="center"/> |
| | </mx:Component> |
| | </mx:itemRenderer> |
| | </mx:DataGridColumn> |
| | <mx:DataGridColumn dataField="credit" headerText="Author" width="100" /> |
| | <mx:DataGridColumn dataField="thumbnail" headerText="Photo" width="100"> |
| | <mx:itemRenderer> |
| | <mx:Component> |
| | <mx:Image height="75" |
| | horizontalAlign="center" |
| | source="{data.thumbnail.url}"/> |
| | </mx:Component> |
| | </mx:itemRenderer> |
| | </mx:DataGridColumn> |
| | </mx:columns> |
| | </mx:DataGrid> |
| | |
| | <mx:Panel id="popup" |
| | visible="false" |
| | click="hidePopup()" |
| | paddingLeft="10" paddingTop="10" paddingRight="10" |
| | layout="horizontal"> |
| | <mx:VBox width="325" height="400"> |
| | <mx:Label id="desc"/> |
| | <mx:Image id="theImage"/> |
| | </mx:VBox> |
| | </mx:Panel> |
| | </mx:HBox> |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Example |
| | |
| | {test-flash:650|750|DataGridPart3d.swf}DataGridPart3d{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3d.+Displaying+lists+of+items} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Item+Renderers} |
