How to implement radion button with check box in one tree in flex 3.0
Here is main Application file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initList()">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.messaging.channels.StreamingAMFChannel;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
public static var tList:XML;
private function initList():void{
tree_List.send();
}
private function onResultList(event:ResultEvent):void{
tList = new XML(event.result);
}
private function addTreeNode():void{
var cNode:CreateNode = new CreateNode();
PopUpManager.addPopUp(cNode,this,true);
}
private function addItem():void{
if(treeComp.selectedItem == null){
}
else{
if(XML(treeComp.selectedItem).@first=="true")
XML(treeComp.selectedItem).appendChild("<item state='unchecked' isBranch='false' label='New Label' first='true'/>");
else
XML(treeComp.selectedItem).appendChild("<item state='unchecked' isBranch='false' label='New Label' first='false'/>");
}
}
public function remTreeNode():void {
treeComp.dataDescriptor.removeChildAt(XML(treeComp.selectedItem).parent(),XML(treeComp.selectedItem),XML(treeComp.selectedItem).childIndex())
}
private function saveTreeNode():void{
Alert.show(tList);
}
protected function treeComp_dblClickHandler(event:ListEvent):void
{
Tree( event.target ).editedItemPosition = {columnIndex: 0, rowIndex: event.rowIndex };
}
protected function treeComp_itmEditBegHandler(event:ListEvent):void
{
event.preventDefault();
}
]]>
</mx:Script>
<mx:HTTPService
id="tree_List"
resultFormat="xml"
result="onResultList(event)"
showBusyCursor="true"
method="POST"
url="Tree/List.xml"
useProxy="false"
/>
<mx:Canvas id="canMain" width="340" height="100%" minWidth="100">
<mx:Tree id="treeComp" itemRenderer="CheckTreeRenderer" toolTip="For deselection press ctl and click"
labelField="@label"
showRoot="false"
width="340"
height="{canMain.height - treeComp.y - 2}"
dataProvider="{tList}"
editable="true"
doubleClickEnabled="true"
itemDoubleClick="treeComp_dblClickHandler(event)"
itemEditBeginning="treeComp_itmEditBegHandler(event)"
folderOpenIcon="{null}"
folderClosedIcon="{null}"
defaultLeafIcon="{null}"
/>
</mx:Canvas>
</mx:Application>
here is the ItemRenderer file
package
{
import flash.events.MouseEvent;
import flash.xml.*;
import mx.collections.*;
import mx.controls.CheckBox;
import mx.controls.Image;
import mx.controls.RadioButton;
import mx.controls.Tree;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
import mx.controls.RadioButtonGroup;
public class CheckTreeRenderer extends TreeItemRenderer
{
protected var myImage:Image;
// set image properties
private var imageWidth:Number = 6;
private var imageHeight:Number = 6;
private var inner:String = "inner.png";
protected var myCheckBox:CheckBox;
public var RadioBtnGR:RadioButtonGroup
protected var myRadio:RadioButton;
static private var STATE_SCHRODINGER:String = "schrodinger";
static private var STATE_CHECKED:String = "checked";
static private var STATE_UNCHECKED:String = "unchecked";
public var itemXml:XML;
public function CheckTreeRenderer ()
{
super();
mouseEnabled = false;
}
override protected function createChildren():void
{
super.createChildren();
myCheckBox = new CheckBox();
myCheckBox.setStyle("verticalAlign", "middle");
addChild(myCheckBox);
myRadio = new RadioButton();
//RadioBtnGR = new RadioButtonGroup();
//RadioBtnGR =
//myRadio.group = RadioBtnGR
myRadio.setStyle("verticalAlign", "middle");
addChild(myRadio);
}
override public function set data(value:Object):void
{
super.data = value;
/* if(value != null){
this.itemXml = XML(value);
if(this.itemXml.@check == true ){
this.myRadio.selected = true;
}else{
this.myRadio.selected = false;
}
}*/
}
override p开发者_运维问答rotected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(super.data){
var tld:TreeListData = TreeListData(super.listData);
if(tld.hasChildren){
this.myCheckBox.visible = false;
this.myRadio.visible = true;
//this.myRadio.groupName = data.@label
}else{
/* You HAVE to have the else case to set visible to true even though you'd think
the default would be visible it's an issue with itemrenderers... */
this.myCheckBox.visible = true;
this.myRadio.visible = false;
}
if(data.@first == "true"){
myRadio.visible = false;
myCheckBox.visible = true;
}
else{
//this.myRadio.groupName = data.@label
//addChild(myRadio);
myRadio.visible = true;
myCheckBox.visible = false;
}
if(data.@isBranch =="true" ){
myRadio.visible = false;
myCheckBox.visible = false;
}
if(myCheckBox.visible || myRadio.visible){
//if the checkbox is visible then reposition the controls to make room for checkbox
this.myCheckBox.x = super.label.x
this.myCheckBox.y = super.label.y + 10;
this.myRadio.x = super.label.x ;
this.myRadio.y = super.label.y + 10;
super.label.x = this.myRadio.x + 15;
}
}
}
}
}
here is the xml file for accessing the data
<list>
<group state="unchecked" isBranch="true" label="Grains" first="true">
<item state="unchecked" isBranch="false" label="White Bread" first="true"/>
<item state="unchecked" isBranch="false" label="Wheat Bread" first="true"/>
<item state="unchecked" isBranch="false" label="Pasta Bread" first="true" />
<item state="unchecked" isBranch="false" label="Oatmeal Bread" first="true"/>
</group>
<group id="itm1" state="unchecked" isBranch="true" label="Dairy" first="false" >
<item state="unchecked" isBranch="false" label="Milk" first="false" check="true" parentid="itm1"/>
<item state="unchecked" isBranch="false" label="Cheese" first="false" check="false" parentid="itm1"/>
<item state="unchecked" isBranch="false" label="Yogurt" first="false" check="false" parentid="itm1"/>
</group>
<group state="unchecked" isBranch="true" label="Fruits" first="true">
<item state="unchecked" isBranch="false" label="Apple" first="true"/>
<item state="unchecked" isBranch="false" label="Banana" first="true"/>
<item state="unchecked" isBranch="false" label="Citrus" first="true"/>
</group>
<group id="itm2" state="unchecked" isBranch="true" label="Nuts" first="false">
<item state="unchecked" isBranch="false" label="Pecans" first="false" check="true" parentid="itm2"/>
<item state="unchecked" isBranch="false" label="Cashews" first="false" check="false" parentid="itm2"/>
<item state="unchecked" isBranch="false" label="Brazil Nuts" first="false" check="false" parentid="itm2"/>
<group state="unchecked" isBranch="false" label="Check" first="false" check="false" parentid="itm2">
<item state="unchecked" isBranch="false" label="Testnut" first="false" check="false" parentid="itm2"/>
</group>
</group>
</list>
Problem is radio button click show once in the tree,for ex. suppose we have two nodes in tree in this have the radio button but when clicking on the first node radio button automatically second node radio button deselect. not separated each node radio button with others node radio button
I think what you're saying is that when you check one radio button in your tree, all the others are unchecked, which is not what you want. This is how radio buttons behave. If you want to be able to check the buttons independently, you need to use check boxes. If you want the buttons to work in smaller groups, you need to define those groups.
精彩评论