javascript - 无法在 EXTjs 中刷新 TreeStore

Question

我正在尝试在 EXTJs 中创建一个网页，它有两个主要部分:

1. 表单(Ext.form.Panel)
2. 面板(Ext.tree.Panel)

表单应该获得一些值，这些值应该填充第二个面板中的树。在第一个面板的按钮处理程序中，我可以访问更新的 JSON 对象，但我无法找到一种方法来刷新将更新 tree.Panel 中显示的 TreeStore。

这是我目前所拥有的:

Ext.define('TreeServiceData',{
    config:{
    data : ''
    },print : function() {
    console.log("Printing data: ")
    console.log(this.data.children[0])
    }
});
var dataObject = Ext.create('TreeServiceData');
dataObject.setData({'expanded':false,'children':[{'text':'Master','expanded':true,'leaf':false,'children':[{'text':'Child 1','expanded':true,'leaf':false,'children':[{'text':'Child 2','expanded':true,'leaf':false,'children':[{'text':'Child 3','expanded':false,'leaf':false}]}]}]}]})


Ext.define('TreeStoreData',{
    extend: 'Ext.data.TreeStore',
    model: 'TaskModel',
    autoLoad: true,
    autoSync: true,
    proxy: {
        type:'memory',
        reader: {
            type:'json'
        }
    },
    root:dataObject.getData()
});

var treeStore = Ext.create('TreeStoreData');

现在我正在尝试在按钮调用上更新和显示此树存储的值，如下所示:

buttons:[
{
    text:'Get CCP/Product',
    handler:function (btn, evt) {
        dataObject.print();
        treeStore.removeAll();           
        dataObject.setData({'expanded':false,'children':[{'text':'Master11','expanded':true,'leaf':false,'children':[{'text':'Child 12','expanded':true,'leaf':false,'children':[{'text':'Child 23','expanded':true,'leaf':false,'children':[{'text':'Child 34','expanded':false,'leaf':false}]}]}]}]})
        dataObject.print();

    }
}
]

但在这个按钮处理程序上，我总是在 treeStore.removeAll() 方法上收到“未捕获的类型错误:无法调用未定义的方法'indexOf'”，其中在此上下文中明确定义了 treestore。

问题 1)刷新 TreeStore 的正确方法是什么？

Answer 1

答案 1)

代替:

treeStore.removeAll();
dataObject.setData( ... );

你应该这样做:

dataObject.setData( ... ); // This won't affect the store
treeStore.setRootNode(dataObject.getData()); // Actually update the store

请注意，更改 dataObject 的数据不会像您想象的那样自动影响存储...