Ext.tree: reset Treeloader & render Tree without pageref

[oxi]

Does anyone know how to change the Treeloader of a loaded Ext.tree and render a different tree instead using a different TreeLoader without a pagerefresh?

I only managed to dublicate the tree running init function again:

tree.init();

I'm using ext-1.0-alpha2.

[BernardChhun]

Does anyone know how to change the Treeloader of a loaded Ext.tree and render a different tree instead using a different TreeLoader without a pagerefresh?

I only managed to dublicate the tree running init function again:

tree.init();

I'm using ext-1.0-alpha2.

this works like a charm without a page refresh. just call the changeLoader function and replace the loader's url to your url.
It just sets another loader to the tree and then reloads its root.

initTreePanel : function(){
			// the TreePanel XHR url call.  
			this.fileTreeUrl = "xhr.php";
			// init the TreePanel
			this.fileTree = new Ext.tree.TreePanel("fileTree", {animate:true, containerScroll: true, rootVisible:true});			
			// suscribing to the selectionChange event to save the current selected node.
			this.fileTree.getSelectionModel().on('selectionchange', 
				function(sm, node){
					this.currentNode = node;
				}.createDelegate(this)
			);
			// creating the root node
			var root = new Ext.tree.TreeNode({id: "root", text: "root", leaf: false});
			// the root becomes an AsyncTreeNode once the loader url is set!
			if (this.fileTreeUrl != ''){
				this.fileTree.loader = new Ext.tree.TreeLoader({dataUrl: this.fileTreeUrl});
				root = new Ext.tree.AsyncTreeNode({id: "root", text: "root", leaf: false});
			}
			this.fileTree.setRootNode(root);
			this.fileTree.render();
		},
		
		changeLoader : function(){
			this.fileTree.loader = new Ext.tree.TreeLoader({dataUrl: "xhr2.php"});
			this.fileTree.root.reload();
		}

[oxi]

Cool! Thanks a lot for your sample code. I was using this ugly workaround:

document.getElementById('treediv').innerHTML='';
tree.init('get-nodes2.php');

[skumarb]

i have problem when am updating the tree am able to get the data from db but am not able to update the tree.
any help out me .this is the code. on close am calling onCloseProfileDialogfunction.




/**
* Auraria(R) Networks
* Copyright(C) 2007-2008 Auraria Networks, Inc.
* All Rights Reserved
*
*/
Ext.ns('SaveDocumentToDialog');

SaveDocumentToDialog = Ext.extend(Ext.Window, {


// override
initComponent : function() {
this.viewManager = Seam.Component.getInstance("ViewManager");

this.formPanel = this.createFormPanel();

Ext.apply(this, {
width:450
,height:300
,layout:"fit"
,title : "Save documents to" //this.selectedContext.caller
,resizable: false
,modal:true
,defaultButton: 0
,items:this.formPanel
});

// finally call the superclasses implementation
SaveDocumentToDialog.superclass.initComponent.call(this);
this.addButton(ECA._localeStrObj.ProfileSummary_newButton, function() {
this.profileDialog = new ProfileDialog.CreateProfileDialog({callerContext:"Others"});
this.profileDialog.on('close', this.onCloseProfileDialog, this);
this.profileDialog.show();
}, this);

this.addButton(ECA._localeStrObj.CreateProject_okBtn, function() {

var node = this.searchBrowseTree.getSelectionModel().getSelectedNode();
var request = new Seam.Remoting.createType("com.digitalreefinc.ws.AddFromDocumentsRequestMessage");
request.srcDocumentHandleList = this.selections;
request.setDestViewHandle(node.attributes.viewHandle);
ECA.viewManager.addFromDocuments(request);
this.close();
}, this);


this.addButton("Cancel", function() {
this.close();
}, this);

},

onCloseProfileDialog: function() {
this.loadData(this);
this.searchBrowseTree.expandPath(this.rootNode);

},

createFormPanel: function(){

this.sysMgmtTreeLoader = new Ext.tree.TreeLoader({
directFn: this.loadData.createDelegate(this)

});

this.searchBrowseTree = new Ext.tree.TreePanel({
border : false,
header : false,
loader : this.sysMgmtTreeLoader,
flex : 1,
scope: this,
rootVisible: false,

root: {
id: 'root',
expanded : true,
nodeType: 'async',
text: 'The Root',
draggable: false
}
});
this.centerPanel = new Ext.Panel({
width : 300,
height : 250,
autoScroll : true,
region: 'center',
items : this.searchBrowseTree
});

this.westPanel = new Ext.Panel({
width : 150,
height : 300,
region: 'west',
items : new Ext.form.Label({
fieldLabel: '<b>' + ECA._localeStrObj.SearchDuplicateDocumentDialog_target + '</b>',
name : 'target'
})
});

this.mainPanel = new Ext.Panel({
layout: 'column',
items : [this.westPanel, this.centerPanel]
})
this.searchFormPanel = new Ext.form.FormPanel({
frame: true,
layout: 'fit',
id: 'searchFormPanel',
items: this.mainPanel
});

return this.mainPanel;
},

loadData: function(nodeId, loadDelegate) {
var request = new Seam.Remoting.createType("com.digitalreefinc.eca.GetSaveDocumentToTreeRequestMessage");
request.setCaseHandle(ECA.projectId);
Seam.Component.getInstance("CaseManager").getSaveDocumentToTree(request, this.loadDataCB.createDelegate(this, [loadDelegate], true));
},

loadDataCB: function(result, junk1, junk2, loadDelegate) {
var response = Ext.util.JSON.decode(result);
if (response.error)
{

alert('Tree failed: '+response.error);
}
else
{
loadDelegate(response, { status: 'OK' });
}
}
});