flex中的树控件

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>


	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ArrayList;
			import mx.controls.Alert;
			import mx.controls.treeClasses.TreeItemRenderer;
			import mx.core.UITextField;
			import mx.events.ListEvent;
			protected function linkbutton1_clickHandler(event:MouseEvent):void
			{
				op.label = op.label == "+" ? "-" : "+";
				var isExpend:Boolean = op.label == "-";
				for each(var node:XML in myTree.dataProvider)
				{
					myTree.expandChildrenOf(node,isExpend);
				}
			}

			protected function linkbutton2_clickHandler(event:MouseEvent):void
			{
				zk.label = zk.label == "<<" ? ">>" : "<<";
				can.width = 0;
			}


			protected function myTree_clickHandler(event:Event):void
			{
				if(event.target is UITextField) {
					var sed:String = TreeItemRenderer(UITextField(event.target).owner).data.@title;
					//Alert.show(sed);
					//adg.dataProvider = prd.prod;
					var arr:ArrayList = new ArrayList();
					for(var i = 0; i< prd.prod.length; i++) {
						if(prd.prod[i].cgy == sed) {
							arr.addItem(prd.prod[i]);
						}
					}
					adg.dataProvider = arr;
				}
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<fx:XMLList id="treedb">
			<root title="商品分类">
				<node title="家电"/>
				<node title="通讯"/>
			</root>
		</fx:XMLList>
		<fx:Model id="prd">
			<datas>
				<prod>
					<cgy>家电</cgy>
					<name>冰箱</name>
					<price>2330</price>
					<desc>很好！</desc>
				</prod>
				<prod>
					<cgy>家电</cgy>
					<name>彩电</name>
					<price>6533</price>
					<desc>很好！很好！</desc>
				</prod>
				<prod>
					<cgy>通讯</cgy>
					<name>小灵通</name>
					<price>4321</price>
					<desc>不错！</desc>
				</prod>
				<prod>
					<cgy>通讯</cgy>
					<name>手机</name>
					<price>311</price>
					<desc>打不通！</desc>
				</prod>
			</datas>
		</fx:Model>	
	</fx:Declarations>
	<s:Panel width="800" height="400" title="树形控件">
		<s:layout>
			<s:HorizontalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
		</s:layout>
		<mx:HDividedBox width="100%" height="100%"  liveDragging="true">
			<mx:VBox  id="can">
				<mx:Canvas>
					<mx:LinkButton id="op" label="+" x="140" width="35" click="linkbutton1_clickHandler(event)"/>
					<mx:LinkButton id="zk" label="<<" x="165" width="35" click="linkbutton2_clickHandler(event)"/>
				</mx:Canvas>
				<mx:Tree id="myTree" dataProvider="{treedb}" labelField="@title" width="200" height="320"
						 click="myTree_clickHandler(event)">
					
				</mx:Tree>
			</mx:VBox>
			<mx:AdvancedDataGrid id="adg" width="500" height="350">
				<mx:columns>
					<mx:AdvancedDataGridColumn headerText="类型" dataField="cgy"/>
					<mx:AdvancedDataGridColumn headerText="名称" dataField="name"/>
					<mx:AdvancedDataGridColumn headerText="价格" dataField="price"/>
					<mx:AdvancedDataGridColumn headerText="描述" dataField="desc"/>
				</mx:columns>
			</mx:AdvancedDataGrid>
		</mx:HDividedBox>
	</s:Panel>
</s:Application>