Tag Archive | mx:Tree

Flex Tree –

The following example demonstrates, displaying elements from an ArrayCollection in a tree structure using the mx:tree component. It also displays the no of children under the parent item of the tree.

The labelFunction has been used in this example not only to display the no of children under the parent, It helps in displaying Items in a tree structure when dynamic data is used ex: XML, Json etc.

      
<?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">
	
<fx:Script>
   <![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable] public var ac:ArrayCollection= new ArrayCollection([
		{ name: "Animals", 
         	  children: new ArrayCollection([{name:"dog"},{name:"cat"},
                  {name:"kitten"}])},
		{ name: "Fruits",  
		  children: new ArrayCollection([{name:"orange"},{name:"apple"} 
          ])}
         ]);
			
	private function Tree_labelFunc(item:Object):String {
		var suffix:String = "";
		if (Tree.dataDescriptor.hasChildren(item)) {
			suffix = " (" + item.children.length + ")";
		}
		return item.name+" "+suffix;
	}		
]]>
</fx:Script>
<mx:Tree   id="Tree"
	   labelFunction="{Tree_labelFunc}"
	   dataProvider="{ac}" openItems="1"     
	   openDuration="500" width="100%" height="100%">
</mx:Tree>

</s:Application>


<mx:Tree   id=”contentManagementTree”  itemRenderer=”treeRenderer” defaultLeafIcon=”{leaf}”  labelFunction=”{contentManagementTree_labelFunc}” dataProvider=”{contentmodel.topiclist}” openItems=”1″fontSize=”12″ color=”#0d1b02″ filters=”{textEmboss}”  fontFamily=”Calibri” fontAntiAliasType=”advanced”
contentBackgroundAlpha=”0″ borderAlpha=”0″ selectionColor=”#cbec91″ rollOverColor=”#98b26b”
openDuration=”500″ width=”100%” height=”100%” creationComplete=”contentManagementTree_creationCompleteHandler(event)” itemClick=”contetntMang_itemClickHandler(event)”  >
<!–tree–>
</mx:Tree>