定期更新 EXTJS 4 Treepanel答案

【问题标题】：Updating EXTJS 4 Treepanel periodic定期更新 EXTJS 4 Treepanel
【发布时间】：2013-12-18 18:15:57
【问题描述】：

我想创建一个Treepanel，它每秒更新一次。所以我拿了一个带有数据采集代理的商店：

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

商店似乎可以工作，数据显示在我的TreePanel中。

我尝试用这个函数更新Treepanel：

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

更新似乎也有效。不幸的是，更新在每次更新时都会导致某种“闪烁”效果，因为重新加载了整个树。我正在寻找一种仅刷新已更改节点的方法。

有没有办法做到这一点？

问候

【问题讨论】：

标签： extjs refresh treepanel extjs4

【解决方案1】：

有一种方法：您可以将节点加载到某个临时存储并逐个更改主树的存储节点

【讨论】：

嗯，能发个小例子吗？

【解决方案2】：

如果你想添加任何新节点并且不想重新加载整个商店，那么你可以像这样添加

 //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();

如果你想加载整个商店，你可以这样做

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

加载商店。要定期更新商店，您可以使用DelatedTask Class。

查看 EXTJS 的 Documentation API 将为您提供更多详细信息。

【讨论】：

【解决方案3】：

Store 像 grid 和 store 一样绑定 Treepanel，所以你可以从树形面板中获取 Store

var store=treepanel.getStore()

您可以使用需要更新的分支重新加载商店

store.load({node:selectedNode})

【讨论】：

【解决方案4】：

您可以为此使用TaskManager：

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

这将每秒执行一次 reloadStoreFunction。

【讨论】：