Refresh node in tree panel

[Kcarpenter]

Post your code, well see what we find.

[russall1985]

Hey guys I totally agree node.reload() was easy in pre extjs 4. I found that this works,

yourTreeStore.load({node:record});

if you can get a handle on the Ext.data.TreeStore you can call load on it passing the node you want to reload. Seems to work for me.

thanks,

Russell Holmes

[SharePat]

Thanks, Russell, that works fine.

The handle to your treestore can be provided by:

yourTreePanel.getStore()

By the way, if you need to do more after loading, the options config for the load method can have a callback function, like:

        

yourTreePanel.getStore().load({node:yourNode,
                                           callback:function() {
                                              ...do something useful...
                                           }
                                          });

[zhangming_3113]

Ext.onReady(function()
{

Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

store = Ext.create('Ext.data.TreeStore',
{
proxy:
{
type: 'ajax',
url: '/bpm/index.nsf/agentGetFolderList?openagent'
},
reader:{
type: 'json'
},
root: {
text: 'ExtJS',
id: 'src',
expanded: true
},
autoLoad: true,
autoSync: true,
clearOnLoad: true
});

var tb=new Ext.Toolbar(
{
cls:'top-toolbar',
items:
[
{text:document.all.UserInfo.value,id:'UserInfo',icon:'/linkey/bpm/images/r.gif',handler:openurl,cls: 'x-btn-text-icon bmenu'},'-',
{text:'homepage',id:'homepage',icon:'/linkey/bpm/images/icons/fam/task.gif',cls: 'x-btn-text-icon bmenu',handler:openurl},'-',
{text:'mail',id:'mail',icon:'/linkey/bpm/images/icons/fam/mail.gif',cls: 'x-btn-text-icon bmenu',handler:openurl},'-',
{text:'flow',id:'startflow',icon:'/linkey/bpm/images/icons/fam/flow.gif',cls: 'x-btn-text-icon bmenu',handler:openurl}
]
});

var tabs = Ext.createWidget('tabpanel',
{
renderTo: document.body,
activeTab: 0,
autoHeight: true,
defaults :
{
bodyPadding: 10
},
items:[
{
title: 'desktop',
closable: false,
items: [
{
xtype: 'container',
region: 'center',
layout: 'border',
items:[
{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center'
}]
}
]
}]
});

viewport = Ext.create('Ext.Viewport',
{
id: 'border-example',
layout: 'border',
items: [
{
region:'north',
height:70,
margins: '0 0 0 0',
html:"<table width=100% height=100% border=0 cellpadding=0 cellspacing=0 ><tr><td width=50%><img src='"+document.all.logo.value+"'></td></tr></table>",
bbar:tb
},
{
region: 'west',
id:'west-panel',
title:"desktop",
collapsible: true,
xtype: 'treepanel',
width: 152,
autoScroll: true,
split: true,
singleExpand: true,
useArrows: true,
lines: false,
margins: '2 0 3 2',
rootVisible: false,
store: store,
listeners:{itemclick:function(view,record,node,index,e){ShowSubWin(view,record,node,e)}}
},
{
region: 'center',
id: 'center-portal',
items:tabs
}
]
});

function openurl(e)
{
var url="";
if(e.id=="startflow")
{
/*
var proxy = Ext.create('Ext.data.proxy.Proxy',
{
type: 'ajax',
url: "/bpm/linkey_workflow_show.nsf/agentGetFolderList?openagent",
reader:{type: 'json'}
});*/

var operation = new Ext.data.Operation({ action: 'update'});
var proxy = new Ext.data.proxy.Ajax({
url: "/bpm/linkey_workflow_show.nsf/agentGetFolderList?openagent",
reader: 'json'
});
proxy.read(operation);

//var panel = Ext.getCmp("west-panel");
//var data = panel.getStore();
//data.removeAll();
//data.setProxy(proxy);
//data.sync();
//panel.getStore.load({params:{nodeParam:node}});
//panel.setTitle("Test");
//panel.show();

}

}
});

[zhangming_3113]

when i click the button 'flow',i want to change the content of the tree in west panel.
in function openurl, i need to refresh the tree,but i do not know how to relize.
//////
Ext.onReady(function()
{

Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

store = Ext.create('Ext.data.TreeStore',
{
proxy:
{
type: 'ajax',
url: '/bpm/index.nsf/agentGetFolderList?openagent'
},
reader:{
type: 'json'
},
root: {
text: 'ExtJS',
id: 'src',
expanded: true
},
autoLoad: true,
autoSync: true,
clearOnLoad: true
});

var tb=new Ext.Toolbar(
{
cls:'top-toolbar',
items:
[
{text:document.all.UserInfo.value,id:'UserInfo',icon:'/linkey/bpm/images/r.gif',handler:openurl,cls: 'x-btn-text-icon bmenu'},'-',
{text:'homepage',id:'homepage',icon:'/linkey/bpm/images/icons/fam/task.gif',cls: 'x-btn-text-icon bmenu',handler:openurl},'-',
{text:'mail',id:'mail',icon:'/linkey/bpm/images/icons/fam/mail.gif',cls: 'x-btn-text-icon bmenu',handler:openurl},'-',
{text:'flow',id:'startflow',icon:'/linkey/bpm/images/icons/fam/flow.gif',cls: 'x-btn-text-icon bmenu',handler:openurl}
]
});

var tabs = Ext.createWidget('tabpanel',
{
renderTo: document.body,
activeTab: 0,
autoHeight: true,
defaults :
{
bodyPadding: 10
},
items:[
{
title: 'desktop',
closable: false,
items: [
{
xtype: 'container',
region: 'center',
layout: 'border',
items:[
{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center'
}]
}
]
}]
});

viewport = Ext.create('Ext.Viewport',
{
id: 'border-example',
layout: 'border',
items: [
{
region:'north',
height:70,
margins: '0 0 0 0',
html:"<table width=100% height=100% border=0 cellpadding=0 cellspacing=0 ><tr><td width=50%><img src='"+document.all.logo.value+"'></td></tr></table>",
bbar:tb
},
{
region: 'west',
id:'west-panel',
title:"desktop",
collapsible: true,
xtype: 'treepanel',
width: 152,
autoScroll: true,
split: true,
singleExpand: true,
useArrows: true,
lines: false,
margins: '2 0 3 2',
rootVisible: false,
store: store,
listeners:{itemclick:function(view,record,node,index,e){ShowSubWin(view,record,node,e)}}
},
{
region: 'center',
id: 'center-portal',
items:tabs
}
]
});

function openurl(e)
{
var url="";
if(e.id=="startflow")
{
/*
var proxy = Ext.create('Ext.data.proxy.Proxy',
{
type: 'ajax',
url: "/bpm/linkey_workflow_show.nsf/agentGetFolderList?openagent",
reader:{type: 'json'}
});*/

var operation = new Ext.data.Operation({ action: 'update'});
var proxy = new Ext.data.proxy.Ajax({
url: "/bpm/linkey_workflow_show.nsf/agentGetFolderList?openagent",
reader: 'json'
});
proxy.read(operation);

//var panel = Ext.getCmp("west-panel");
//var data = panel.getStore();
//data.removeAll();
//data.setProxy(proxy);
//data.sync();
//panel.getStore.load({params:{nodeParam:node}});
//panel.setTitle("Test");
//panel.show();

}

}
});

[navnet]

var node = TreeStore.getNodeById(id);
TreeStore.read({
node: node,
callback: function() {

}
});

[navnet]

TRY THIS
var node = TreeStore.getNodeById(id);
TreeStore.read({
node: node,
callback: function() {

}
});

Hi, in version 3 I used this to reload (from the server) a single node in a TreePanel:

treePanel.on('click', function(node, event) {

// some code to send update message to the server, causing the children to change

node.reload();
});

But I can't figure out how to do the same thing in extjs 4.

treePanel.on('itemclick', function(view, record){

// some code to send update message to the server, causing the children to change

// what goes here???
});


Thanks for your help

[skydance]

Try to get the node id first, then call the treepanel, then run the reload()

var node_id=menu.item_type+'+'+menu.item_id;

var treePanel= Ext.getCmp('treePanel');
var node = treePanel.getNodeById(node_id);

node.reload();

[eliotik]

im trying to update node with new data from server side

                tree.getStore().load({node: id, callback:function(n) {
                  console.log('sn');
                  console.log(sn);
                  console.log('n');
                  console.log(n);
                  sn[0] = n[0];
                  console.log('sn re');
                  console.log(sn);
                  sn[0].commit();
                  console.log('sn co');
                  console.log(sn);
                }}); 

in console i can see old data in sn new data in n and after sn[0] = n[0]; i can see that sn has new data from n, and after commit i can see that sn has new data from n.
but on event 'selectionchange' on my tree i do console.log(sn); and i can see that sn still has old data.
how can i update node, not his childs?

[Priet]

I still can't get this thing to work :-(

When I try this:

treeStore.load({
  node: node.get("id")
}); 

That load will be loaded, but it will be the only node under the root node! All other nodes are gone!

How do I just reload the children of a node?