3 Replies Latest reply on May 20, 2009 3:53 AM by Phoenix_Guru

    Tree control with ComboBox

    jef_dallas_tx Level 1
      Hi All,

      I have a need for a tree control which supports having a combobox. I've done extensive research on Google, but came up empty. If anyone has or can point me to any examples, it would be greatly appreciated.

      Thanks in advance!

      -jf
        • 1. Re: Tree control with ComboBox
          ntsiii Level 3
          This is a job for a custom itemRenderer. Read the docs, the archives, google, and post back with specific problems or questions.

          Tracy
          • 2. Re: Tree control with ComboBox
            jef_dallas_tx Level 1
            Here's a follow-up to my first question.

            I found an example of a tree with checkboxes and set out to modify it so that it would fit my needs. I'm really stumped here, because it will render a checkbox or radio button fine, but I can't get it to render a combobox or button. I'd also like the combobox and button to be on the right side of the parent/child label, is that possible?

            Any help anyone can provide is greatly appreciated.

            Content of ComboBoxTreeRenderer:
            **************************************************************
            package util
            {
            import mx.controls.Image;
            import mx.controls.Tree;
            import mx.controls.treeClasses.*;
            import mx.collections.*;
            import mx.controls.ComboBox;
            import mx.controls.Button;
            import mx.controls.RadioButton;
            import mx.controls.listClasses.*;
            import flash.events.Event;
            import flash.events.MouseEvent;
            import mx.events.FlexEvent;
            import flash.display.DisplayObject;
            import flash.events.MouseEvent;
            import flash.xml.*;

            import mx.core.IDataRenderer;

            public class ComboBoxTreeRenderer extends TreeItemRenderer
            {
            protected var myImage:Image;

            // set image properties
            protected var myComboBox:ComboBox;
            protected var myRadioButton:RadioButton;
            protected var myButton:Button;

            public function ComboBoxTreeRenderer ()
            {
            super();
            mouseEnabled = false;
            }


            override protected function createChildren():void
            {
            super.createChildren();
            myRadioButton = new RadioButton();
            addChild(myRadioButton);
            myComboBox = new ComboBox();
            addChild(myComboBox);
            myButton = new Button();
            myButton.setStyle( "label", "Button" );
            addChild(myButton);
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(super.data)
            {
            if (super.icon != null)
            {
            myRadioButton.x = super.icon.x;
            myRadioButton.y = 2;
            super.icon.x = myRadioButton.x + myRadioButton.width + 17;
            super.label.x = super.icon.x + super.icon.width + 3;
            }
            else
            {
            myRadioButton.x = super.label.x;
            myRadioButton.y = 2;
            super.label.x = myRadioButton.x + myRadioButton.width + 17;
            }
            }
            }
            }
            }

            **************************************************************



            Content of comboBoxTree_test.mxml:
            **************************************************************
            <?xml version="1.0" encoding="iso-8859-1"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init();" >

            <mx:Script>
            <![CDATA[

            import mx.collections.*;

            [Bindable]
            public var treeList:XMLList =
            <>
            <folder isBranch="true" label="Branch 1" >
            <folder isBranch="false" label="Leaf 1" />
            <folder isBranch="false" label="Leaf 2" />
            </folder>
            </>;

            [Bindable]
            public var folderCollection:XMLListCollection;

            private function init() : void
            {
            folderCollection = new XMLListCollection(treeList);
            comboBoxTree.dataProvider = folderCollection;
            }

            ]]>
            </mx:Script>
            <mx:Tree
            id="comboBoxTree"
            itemRenderer="util.ComboBoxTreeRenderer"
            labelField="@label"
            width="100%" height="100%" >
            </mx:Tree>
            </mx:Application>
            **************************************************************
            • 3. Re: Tree control with ComboBox
              Phoenix_Guru Level 1

              Hi Jf,

               

                   I have a similar requirement to create a tree control which can have combobox as the node. Were you able to create this tree control with combobox? It would be a great help if you could share the code with me, if you have.

               

              Thanks,

              Guru