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

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