Flex Tree和其他控件的联动

Flex Tree和其他控件的联动

在应用中有一种需求：还是照图来描述吧~

首先图下面的数据列表需要根据树中点击的不同项来动态生成，因为的不同项显示的内容是不一样的。这里主要讲一下树和显示列表的联动，即：点击树的另外节点时  TabNavigator应该切换到该节点对应的数据列表，而在TabNavigator中切换的时候，Tree中选择的节点也做相应的切换。

1.树控制控件

           
            private function onTreeChange(event:ListEvent):void
            {
                var itemIsBranch:Boolean = inforTree.dataDescriptor.isBranch(inforTree.selectedItem);//判断是否为根节点
                if(itemIsBranch)  //根节点
                {
                    //如果是上一次点击过的根节点
                    if(openedItem==inforTree.selectedItem)
                    {
                        return ;
                    }
                    openedItem=inforTree.selectedItem;
                    var length:int=    inforTree.dataDescriptor.getChildren(event.itemRenderer.data).length;
                    var xml:XML=event.itemRenderer.data as XML;
                    var xmllist:XMLList=xml.children().attribute("Text");         //Text属性
                    var leafcd:String=xml.attribute("leaf_cd");  //编号
                    var tablename:String=xml.attribute("leaf_tablename");//表名
                    var type:XMLList=xml.children().attribute("sub_tablename"); //类型
                    this.iforTab.removeAllChildren();                                            //先清除上次TabNavigator中的子控件
                    for(var i:int=0;i<xmllist.length();i++)
                    {
                       creatCanvas(xmllist[i].toString(),i,type[i].toString(),leafcd,tablename);//创建显示列表的方法
                    }
                    iforTab.selectedIndex=0;
                }else   //子节点
                {
                    var tempTree:Tree=Tree(event.target);
                    var obj:Object=    tempTree.getParentItem(inforTree.selectedItem); //获取该子节点对应的父节点
                    var o:XML=inforTree.selectedItem as XML;
                    var name:String=o.attribute("Text");
                    if(openedItem==obj)
                    {
                        //如果是同一个父节点下的字节点
                        iforTab.selectedIndex=iforTab.getChildIndex(iforTab.getChildByName(name)); //切换TabNavigator中显示的列表
                        return ;
                    }
                    openedItem=obj;
                    var xml2:XML=obj as XML;
                    var xmllist2:XMLList=xml2.children().attribute("Text");
                    var leafcd2:String=xml2.attribute("leaf_cd");  //编号
                    var tablename2:String=xml2.attribute("leaf_tablename");//表名
                    var type2:XMLList=xml2.children().attribute("sub_tablename"); //类型
                    this.iforTab.removeAllChildren();
                    for(var j:int=0;j<xmllist2.length();j++)
                    {
                       creatCanvas(xmllist2[j].toString(),j,type2[j].toString(),leafcd2,tablename2);
                    }
                    index=iforTab.getChildIndex(iforTab.getChildByName(name));
                    //设置Tab的第一个项为当前显示的项
                    inforTree.callLater(setIndex);
                }
            }

//设置TabNavigator当前显示的位置

private function setIndex():void
            {
                iforTab.selectedIndex=index;
            }

 

       //创建TabNavigator的子项
        private function creatCanvas(text:String,index:int,type:String,leafcd:String,tableName:String):void
        {
            var userdg:userDataGrid=new userDataGrid(); //自定义的数据显示控件
            userdg.hs=this;
            userdg.name=text;
            userdg.type=type;
            userdg.table_name=tableName;
            userdg.leafcd=leafcd;
            userdg.width=this.iforTab.width;
            userdg.height=this.iforTab.height;
  
            userdg.label=text;
            this.iforTab.addChildAt(userdg,index);         //自定义的数据显示控件添加到TabNavigator中的index处
        }

 

 

 

 

 

 

 

 

 

 

 

到此为止，树控制控件已经实现，接下来是控件控制树

2.控件控制树

实现方法是，找出控件对应关联的节点在整个数据源中的位置，然后通过设置树的selectedIndex属性来实现。

           
            private function onIndexChange(event:IndexChangedEvent):void
            {
                var name:String=event.relatedObject.name;//tab的名字
                var arrText:XMLList=openedItem.products; //当前树中点击的父节点
                var openX:XML=openedItem as XML;
                var openedIndex:int=openX.childIndex();  //当前父节点所在整个xml数据源中的位置
                //父节点的位置
                var itemInd:int;                                        
                for(var i:int=0;i<openedIndex;i++)
                {
                    itemInd+=(M_xml[i]as XML).children().length();//M_xml为树的数据源，这里获取到openedItem兄弟节点下的子节点数
                }
                itemInd+=openedIndex;                                       //加上父节点占的位置
                //子节点的位置
                var leafIndex:int;
                for(var j:int=0;j<arrText.length();j++)
                {
                    if(arrText[j].@Text==name)
                    {
                        leafIndex=++j;
                    }
                }

                this.inforTree.selectedIndex=itemInd+leafIndex;
            }

 

 

到此此功能成功实现，树的子节点层数不同代码会有所不同，但是思路是正确的。