I searched for many days but i didn't find the answer on google, so i post my own solution to this problem, how to populate a treeview with webservice for each level, with lazy loading ?
Solution is in 3 words :
- disableAutoUpdate
- enableAutoUpdate
- itemUpdated
So now ,the source !
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comp="*"
paddingTop="0"
width="100%"
height="100%"
layout="horizontal"
styleName="plain" pageTitle="XXX"
creationComplete="creationCompleteHandler()"
>
<fx:Script>
<![CDATA[
import MyLib.*;
import mx.collections.ArrayCollection;
import mx.containers.TitleWindow;
import mx.controls.treeClasses.TreeListData;
import mx.events.ListEvent;
import mx.events.TreeEvent;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectProxy;
[Bindable]
private var acSiteTreeList:ArrayCollection;
protected var obj:Object;
private function creationCompleteHandler():void
{
acSiteTreeList=new ArrayCollection();
for(var i:int=0;i<8;i++)
{
obj=new Object();
obj["type"]="site";
obj["children"]=new ArrayCollection();
//fetch is a property in the dataprovider to check if I have fetched the child nodes previously
obj["fetch"]=false;
obj["label"]="Site "+i.toString();
acSiteTreeList.addItem(obj);
}
}
protected var MyEvent:TreeEvent;
private function setView(event:TreeEvent):void
{
if(event.item.type=="site" && event.item.fetch==false)
{
acSiteTreeList.disableAutoUpdate();
MyEvent=event;
//update the dataprovider
obj=new Object();
obj["type"]="site";
obj["children"]=new ArrayCollection();
obj["fetch"]=false;
var o:Object=new Object();
o["id"]=1;
SelectSite.send(o);
}
}
protected function SelectSiteResult(event:ResultEvent):void
{
var r:XML=XML(event.result);
if (obj["fetch"]==false)
{
obj["type"]="site";
obj["children"]=new ArrayCollection();
obj["fetch"]=false;
obj["label"]=r.item[0].Name;
MyEvent.item.children.addItem(obj);
acSiteTreeList.itemUpdated(obj);
acSiteTreeList.enableAutoUpdate();
}
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id="SelectSite"
url="http://XX.XX.XX.XX/SelectSite.php" resultFormat="e4x"
result="SelectSiteResult(event)" showBusyCursor="true"/>
</fx:Declarations>
<mx:Canvas width="100%" height="100%">
<mx:Tree id="tree" x="42" y="37" width="311" height="337" dataProvider="{acSiteTreeList}" itemOpen="setView(event)"></mx:Tree>
</mx:Canvas>
</mx:Application>
Don't understand? post a comment !
