在一次使用datagrid的时候,嵌入了单选按钮组件:
突然发现单选按钮的组不能用了,互斥不起了,后来想了这样一种写法,其实也没有什么技术含量的,
这样就解决了,但是突然发现在dataGrid里面放单选按钮本就是一个没有意义的事情。呵呵。 还是分享下过程:
<?xml version="1.0"?> <!-- DataGrid control example. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:XMLList id="employees"> <employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>ccoenraets@fictitious.com</email> <active>true</active> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>jwall@fictitious.com</email> <active>true</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>true</active> </employee> </mx:XMLList> <mx:Script> <![CDATA[ private var lastRadioButton:Object = new Object(); public function rdoHandler(data:Object,obj:Object):void{ //将上一次点中的按钮状态设置为未点中 lastRadioButton.selected = false; //通过对象导航到当前点击的单选按钮 //更新最后一次的按钮为当前选中按钮 lastRadioButton = obj.rdo; var temp:String = "姓名:"; temp +=data.name; temp +="\remail:"; temp +=data.phone; temp +="\r电话:"; temp +=data.email; personContent.text = temp; } ]]> </mx:Script> <mx:Panel height="360" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10" fontSize="12"> <mx:Label width="100%" color="blue" text="单选按钮互斥问题"/> <mx:DataGrid id="dg" width="100%" height="175" rowCount="5" dataProvider="{employees}"> <mx:columns> <mx:DataGridColumn> <mx:itemRenderer> <mx:Component> <!--这里随便使用的一个组件包含单选按钮,不然不能给按钮id赋值--> <mx:Canvas> <!--使用outerDocument就可以访问该页面的公有方法,data就是当前行的数据封装对象,this封装了改按钮的信息--> <mx:RadioButton id="rdo" click="outerDocument.rdoHandler(data,this);"> </mx:RadioButton> </mx:Canvas> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:columns> </mx:DataGrid> <mx:TextArea id="personContent" width="266" height="84"/> </mx:Panel> </mx:Application>