PDA

View Full Version : TreePanel with cross-domain data



demami
18 Feb 2011, 2:27 AM
Is there a way to have a TreePanel load its data from a cross-domain URI, as one can with (for example) a grid using ScriptTagProxy? Searching the forums, I've found a few references to this coming "in the next version", but those posts are circa 2008, so I don't know if they refer to Ext 3 or Ext 4.

Is this doable in Ext 3? If so, can someone point me to an example? If it's not possible in Ext 3, is it coming in Ext 4?

carl23934
18 Feb 2011, 6:23 AM
You can use pretty much anything to load a tree if you use the directFn config on the treeloader (http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeLoader&member=directFn).

Cross-domain requests can be done and just pass whatever data you like back. Here's a small example:



<html>
<body>
<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/inc/js/ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({
renderTo: document.body,
width:400,
height:700,
animate: true,
frame: true,
loader: new Ext.tree.TreeLoader({
directFn:function(nodeId, callback ){

//Communicate with server, send nodeId param

var randomFakeNodeId = Math.floor(Math.random()*1001);

var response = [{
text: "Random Node "+randomFakeNodeId,
id: randomFakeNodeId,
cls: "folder"
}];

callback(response, {status:true});
}
}),
root: {
nodeType: 'async',
text: 'Root Node!',
draggable: false,
id: 'root-id'
}
});

});
</script>
</body>
</html>