You are on page 1of 2

Expand the tree without Disclosure Icon and change the tree Icons

Today I face the problem of open the tree without using the disclosure
open and Close Icon and also they need to changr the First folder Icon only.

Then I need to make the search and find out code for open the tree without
disclosure Icon and also I merged the code for change the tree’s first folder.

I give the coding below…

You can use it.

Thanks for http://blog.flexexamples.com

<?xml version="1.0" encoding="utf-8"?>


<!-- http://blog.flexexamples.com/2008/04/05/opening-branches-by-clicking-
rows-in-a-tree-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;

<!----- Function to change the folder Icon of first node ----!>


[Embed("assets/folder_table.png")]
private var FolderTableIcon:Class;

private function init():void


{
var nodeOne:XML = xmlListColl.getItemAt(0) as XML;
tree.setItemIcon(nodeOne, FolderTableIcon, FolderTableIcon);

}
<!---Function for open the tree without disclosure Icon ---!>
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}

private function tree_labelFunc(item:XML):String {


var children:ICollectionView;
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
children = tree.dataDescriptor.getChildren(item);
suffix = " (" + children.length + ")";
}
return item[tree.labelField] + suffix;
}
]]>
</mx:Script>

<mx:XML id="dp">
<root>
<folder label="One">
<folder label="One.A">
<item label="One.A.1" />
<item label="One.A.2" />
<item label="One.A.3" />
<item label="One.A.4" />
<item label="One.A.5" />
</folder>
<item label="One.1" />
<item label="One.2" />
</folder>
<folder label="Two">
<item label="Two.1" />
<folder label="Two.A">
<item label="Two.A.1" />
<item label="Two.A.2" />
</folder>
</folder>
</root>
</mx:XML>

<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
labelFunction="tree_labelFunc"
width="300"
rowCount="6"
itemClick="tree_itemClick(event);" />

</mx:Application>

You can also change the getItemAt(1) to etc depend upon the tree’s node and make the tree’s with
different type folders.

Leave the comments to Improve us….

If you like this post visit http://technotiger87.blogspot.com/

You might also like