Question

我正在尝试在EXTJ中创建一个包含两个主要组件的网页：

表格（Ext.form.Panel）
面板（Ext.tree.Panel）

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

这是我到目前为止所做的：

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');

现在我正在尝试更新并在按钮调用中显示此treestore的值，如下所示：

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（）方法中得到一个“未捕获的TypeError：无法调用未定义的方法'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的数据不会像您想象的那样自动影响商店...

Answer 2

此代码适用于我（ExtJS 4.2.1）总树状图面板节点刷新示例：

    var responseDictObjects = $.ajax({
        data: { Id: this.idDictionary },
        dataType: "json",
        type: "POST",
        cache: false,
        url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData',
        async: false
    }).responseText;

    responseDictObjects = jQuery.parseJSON(responseDictObjects);


    while (this.storeDict.getRootNode().firstChild) {
        this.storeDict.getRootNode().removeChild(this.storeDict.getRootNode().firstChild);
    }
    this.storeDict.getRootNode().appendChild(responseDictObjects.Data);

将this.storeDict替换为商店参考。

就我而言：

        JSON.stringify(responseDictObjects.Data)

返回

“[{” ID “：8中，” 文 “：” KKK”， “叶”：假， “膨胀”：真， “孩子”：空}，{ “ID”：17， “文本”： “TTTTT”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：22， “文”： “GGGG”， “叶子”：假的， “三品”：真实， “孩子”：空}，{ “ID”：23， “文”： “QQQ”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：24，“文本“：” FFF”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：27， “文”： “FFF”， “叶子”：假的， “三品”：真的， “孩子”：空}，{ “ID”：28， “文”： “ggggggggggggggggggg”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：31， “文”： “ttttttttttt666666666”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：32， “文”： “ffffffffffffffffffff”， “叶子”：假的，“扩大“：真正的” 孩子 “：空}，{” ID “：33，” 文 “：” kkkkkkkkkkkkk”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”： 35， “文”： “7777777777”， “叶子”：假的， “三品”：真实的， “孩子”：空}，{ “ID”：36， “文”： “999999999999”， “叶子”：假的， “膨胀”：真， “孩子”：空}，{ “ID”：37， “文本”： “三”， “叶”：假， “膨胀”：真， “孩子”：空}]“

我发现了TreePanel的另一个错误，执行appendChild后会出现预先删除的节点。所以我开始使用jquery树插件（dynatree）。您只需要创建空面板。渲染一个面板后，嵌入树，在我的情况下：

创建空面板：

    that.treePanel = Ext.create('Ext.panel.Panel', {
        title: 'Records',
        width: 350,
        height: 400
    });

渲染面板后，您可以随时刷新节点：

    var that = this;

    var responseDictObjects = $.ajax({
        data: { Id: this.idDictionary },
        dataType: "json",
        type: "POST",
        cache: false,
        url: 'http://' + config.domain + '/' + 'api/Dictionaries/GetDictTreeData',
        async: false
    }).responseText;

    responseDictObjects = jQuery.parseJSON(responseDictObjects);

    var el = this.treePanel.getId();

    if (this.treeDict == null) {
        this.treeDict = $('#' + el).dynatree({
            onActivate: function (node) {
                that.treeDict.lastSelectedId = node.data.index;
            },
            children: []
        });
    }
    this.treeDict.dynatree("getRoot").removeChildren(true);
    this.treeDict.dynatree("getRoot").addChild(responseDictObjects.Data);

无法在EXTjs中刷新TreeStore

2 个答案: