flex datagrid渲染使用

原创 2012年04月12日 17:18:43
Artist类:

package
{
	public class Artist
	{
		public function Artist()
		{
		}
		public var Album:String;
		public var Price:Number;
	}
}
dataGridTest

<?xml version="1.0"?>
<!-- dpcontrols/DataGridPassData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData()">
   <mx:Script>
   <![CDATA[
   	import mx.events.CloseEvent;
      import mx.collections.*;
      import mx.controls.Alert;
      import mx.managers.PopUpManager;
      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];
         
      [Bindable]
      public var initDG:ArrayCollection;
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }
      
      public function del(obj:Object):void {
      	Alert.show("确定要删除吗?","",3,this,alertClickHandler);
      
      }
      
      public function alertClickHandler(event:CloseEvent):void {
      	if(event.detail==Alert.YES) {
      		Alert.show("删除成功!");
      	}
      }
      
      public function updateData(obj:Object):void {
      	var a:Artist = new Artist();
      	a.Album = obj.Artist;
      	a.Price = obj.Price;
      	var pop:update = update(PopUpManager.createPopUp(this,update,true));
      	pop.a = a;
      }
   ]]>
   </mx:Script>
   <mx:DataGrid id="myGrid" width="350" height="200" 
      dataProvider="{initDG}" >
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
         <mx:DataGridColumn headerText="操作"
								   width="100">
					<mx:itemRenderer>
						<mx:Component>
							<mx:HBox width="100%"
									 horizontalAlign="center"
									 verticalAlign="middle">
								<mx:Label buttonMode="true"
										  useHandCursor="true"
										  mouseChildren="false"
										  text="删除"
										  click="outerDocument.del(data)"/>

								<mx:Label buttonMode="true"
										  useHandCursor="true"
										  mouseChildren="false"
										  text="更新"
										  click="outerDocument.updateData(data)"/>

							</mx:HBox>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
      </mx:columns> 
   </mx:DataGrid>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
	
	<mx:Script>
		<![CDATA[
		[Bindable]
		public var a:Artist = new Artist();
		
		public function updateArtis(): void {
			album.text = "update "+a.Album;
			price.text = "update "+a.Price;
		}
			
		]]>
	</mx:Script>
	
	<mx:TextInput id="album" text="{a.Album}" x="49" y="19"/>
	<mx:TextInput id="price" text="{a.Price}" x="49" y="63"/>
	<mx:Button click="updateArtis()" label="修改" x="89" y="135"/>
</mx:TitleWindow>




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

FLEX里DataGrid单元格渲染

  • 2012年09月11日 15:24
  • 9KB
  • 下载

flex DataGrid与CheckBox的使用,表头也加上CheckBox

如图所示,下列代码中就将完成图上功能。注意:代码中是重构了DataGrid这个类! 1、MXML文件    http://www.myflexhero.com/share/2010/12/...

Flex中DataGrid和其它控件使用

  • 2008年06月04日 09:03
  • 547KB
  • 下载

Flex4 DataGrid、AdvancedDataGrid与Tree结合使用

Flex4中,将Tree控件插入到DataGrid中展示,可以看到非常炫的效果。其实平常看到的并不是DataGrid而是AdvancedDataGrid。使用AdvancedDataGrid将Tree...
  • abrahu
  • abrahu
  • 2011年07月06日 12:50
  • 5726

Flex的DataGrid中使用CheckBox

  • 2009年07月22日 11:39
  • 2KB
  • 下载

Flex3学习轨迹:使用DataGrid实现过滤显示

DataGrid组件主要用于显示数据,其本身有排序,自定义列布局,优化列标题,应用渲染器和项编辑等功能。但是DataGrid并没有实现数据过滤显示功能。 效果图如下:   代码如下:...

Flex使用弹出窗口为DataGrid添加新数据

经常在Demo中会看到列表,表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交,这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。 例子展示: 首先...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex datagrid渲染使用
举报原因:
原因补充:

(最多只允许输入30个字)