CODEWITHSUNDEEP
extjsrefreshtreepanelextjs4
semast0r
semast0r

Reputation: 31

Updating EXTJS 4 Treepanel periodic

I would like to create a Treepanel, which is updated once a second. So I took a store with a proxy for data acquistion:

store = new Ext.data.TreeStore({
    model: 'TaskState',
        proxy: {
        type: 'ajax',
        url : '/getTaskList'
},
    root: {
        expanded: true
}});

The store seems to work, the data is displayed in my TreePanel.

I tried to update the Treepanel with this function:

function refresh(){
        store.load();
        window.setTimeout("refresh()", 1000);
    }

The update seems to work as well. Unfortunately the update causes some kind of "blinking" effekt on every update, because the whole tree is reloaded. I'm searching for a way to only refresh the nodes, which have changed.

Is there some way to do this?

greetings

Upvotes: 3

Views: 3461

Answers (4)

Amin Bahiraee
Amin Bahiraee

Reputation: 536

Store is bind Treepanel like grid and store ,so you can get Store from tree panel with 

var store=treepanel.getStore()

and you can reload the store with branch that you need update with

store.load({node:selectedNode})

Upvotes: 1

Francisco Spaeth
Francisco Spaeth

Reputation: 23893

You could use TaskManager for that:

Ext.TaskManager.start({
    run: reloadStoreFunction,
    interval: 1000
});

This would execute reloadStoreFunction every second.

Upvotes: 0

Anand Soni
Anand Soni

Reputation: 5110

If you want to add any new node and do not want to reload the whole store then you can add like this 

 //overModel is Ext.data.Model
 overModel.appendChild({
                        id: responseJson.data['id'],
                        text:responseJson.data['text'],
                        children:responseJson.data['children'],//array of childern
                        parent_id:responseJson.data['parent_id']

  });
  overModel.expand();

and if you want to load the whole store the you can do something like this

Ext.data.StoreManager.lookup('StoreName').load({ params: {"p1": p1}});

to load the store. To update the store periodically you can use DelatedTask Class.

check out the Documentation API of EXTJS will give you more details.

Upvotes: 1

TheHorse
TheHorse

Reputation: 2797

There is one way: You can load your nodes to some temp store and change your main tree's store node by node

Upvotes: 2

Related Questions