2 Replies Latest reply on Aug 13, 2009 5:06 AM by Zolotoj

    Custom tree node

    crooveck

      Hi

      I need to create a custom tree.

       

      Is it posible in flex tree, to have a node, that is a panel component, with a few other components, like textinput or buttons?

      Clicking on buttons causes adding or removing new nodes in appropriate place in the tree.

       

      What in fact I need to create, is advanced filter builder (originaly created in GWT), shown here: http://www.smartclient.com/smartgwt/showcase/#featured_filter_builder_grid

       

      The structure of that filter looks like 'very' custom tree

       

      Do you have any idea how to do that, or where can I find any hints or solutions?

        • 1. Re: Custom tree node
          Virat Patel

          Hello

           

           

          As you need custom tree node like containing button,textfield or image.

           

          Yes it is possible using 'itemRenderer' in tree control you can do the same.

           

          itemRenderer in tree is basicaaly 'TreeItemRenderer'.

           

          So by extending it you can customize the node.

           

           

          With Regards

          Virat Patel

          • 2. Re: Custom tree node
            Zolotoj Level 3

            Here is my tree renderer:

            package
            {
                 import mx.controls.listClasses.IDropInListItemRenderer;
                 import mx.controls.treeClasses.*;
                 public class treeRendererFilter extends TreeItemRenderer
                 {
                      private var customerFilterSet:Boolean = false;
                      public function treeRendererFilter()
                      {
                           super();
                      }
                      override public function set data(value:Object):void 
                      {
                            super.data = value;
                              if (value.@name == "Customer Reporting" && !customerFilterSet)
                              {
                                   var filter:customerReportingFilter = new customerReportingFilter();
                                addChild(filter);
                                filter.data = value;
                                   filter.height = 25;
                                   filter.width = 280;  
                                   customerFilterSet = true;                                                     
                              }
                        }     
                         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
                         {
                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                           if (data.@name == "Customer Reporting")
                           {
                                label.width -= getChildAt(1).width;
                                getChildAt(1).x = label.x + label.width;
                                getChildAt(1).visible = true;
                           }
                           else     
                                if (customerFilterSet)
                                     getChildAt(1).visible = false;
                      }
                 }
            }
            

            <?xml version="1.0" encoding="utf-8"?>
            <mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
                 direction="horizontal" fontSize="10">
                 <mx:Script>
                      <![CDATA[
                      override public function set data(value:Object):void
                      {
                           if(value != null)
                           {
                                exclude.data = value;
                                comments.data = value;
            
                           }
                      }
                      override public function get data():Object
                      {
                           return data;
                      }
                 ]]>
                 </mx:Script>          
                 <mx:HBox width="100%" color="blue">          
                      <mx:CheckBox id="exclude" label="Excluding Skus"/>
                      <mx:CheckBox id="comments" label="Customer Comments"/>
                 </mx:HBox>     
            </mx:FormItem>
            
             
            

             

            HTH