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

?

?

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