开发者

How to implement radion button with check box in one tree in flex 3.0

开发者 https://www.devze.com 2023-01-18 15:59 出处:网络
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()\">

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消