如何在flex 3.0中的一个树中实现带复选框的单选按钮

时间:2010-10-05 13:22:53

标签: flex actionscript-3

这是主要的应用程序文件

<?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>

这里是ItemRenderer文件

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 protected 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;
                }
            }
        }
 }
}

这是用于访问数据的xml文件

<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>

问题是单选按钮单击在树中显示一次,例如。假设我们在树中有两个节点,这里有单选按钮,但是当点击第一个节点单选按钮时,第二个节点单选按钮取消选择。 未将每个节点单选按钮与其他节点单选按钮分开

1 个答案:

答案 0 :(得分:1)

我认为你所说的是当你检查树中的一个单选按钮时,所有其他单选按钮都是未选中的,这不是你想要的。这就是单选按钮的行为方式。如果您希望能够独立检查按钮,则需要使用复选框。如果您希望按钮在较小的组中工作,则需要定义这些组。