ExtJs Tree Panel Not Reload from JSON Store

Question

I am new in Extjs, using ExtJs 4.1.0, I made a tree panel in which the nodes are made from a JSON store. that is fine, but user trying to add/delete new record(or node) explicitly on button click, this shown from json response text the data is added or deleted, but it doesn't refresh the tree panel, kindly help me here. I have tried many methods like tree.getStore.Load() or treepanel.root.reload(); etc. nothing works and gives error as null.

    function MakeTreePanel(_store) {
    LeftPlanObjectenPanel = Ext.create('Ext.tree.Panel', {
        store: _store,
        id: 'mytree',
        autoShow: true,
        //height: 500,
        rootVisible: false,
        clearOnLoad: true,
        border: false,
        renderTo: Ext.getBody()
//        listeners: {
//            itemclick: function (view, record, item, index, e) {
//                fnClickLeaf(record.raw.id);
//                //alert(record.raw.id);
//            }
//        }
    });
}

My store is like:

PlanObjectenStore = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    autoSync: true,
    root: {
        expanded: true
    }
});

Ext.Ajax.request({
    url: 'DS_PlanObject.asmx/GetPlanObjectsByMindplanInJSON',
    timeout: ExtTimeoutVar,
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    jsonData: { DecisionType: DecisionType, DecisionNumber: DecisionNumber, DecisionTypeNumber: DecisionTypeNo, MindPlanID: MindPlanID },
    success: function (result, request) {
        //alert("Response: " + result.responseText);
        PlanObjectJsonCollectionData = Ext.decode(result.responseText);
        if (LeftPlanObjectenPanel == null) {
            PlanObjectenStore = eval('{' + PlanObjectJsonCollectionData.d[0].naam + '}');
            //PlanObjectenStore = eval('{Ext.create(\'Ext.data.TreeStore\', { root: { expanded: true, children: [{ text: "ABCD1234", expanded: true, id: "root", children: [{ text: "plangebied", expanded: true, id: "plangebied" }, { text: "ehs", expanded: true, id: "23" }, { text: "ehs text", expanded: true, id: "24" }, { text: "ehs water", expanded: true, id: "25" }, { text: "lkjlkj", expanded: true, id: "17" }, { text: "new praveen", expanded: true, id: "19" }, { text: "nitin kumar soni", expanded: true, id: "22" }, { text: "nitin soni", expanded: true, id: "20" }, { text: "pks", expanded: true, id: "12" }, { text: "test another", expanded: true, id: "18" }, { text: "test praveen", expanded: true, id: "8" }, { text: "Test1", expanded: true, id: "1" }, { text: "Test2", expanded: true, id: "2" }, { text: "Test3", expanded: true, id: "3" }, { text: "Test4", expanded: true, id: "4" }, { text: "Test5", expanded: true, id: "5" }, { text: "Test6", expanded: true, id: "6" }, { text: "testkees", expanded: true, id: "7" }, { text: "vcvc", expanded: true, id: "15" }, { text: "yes sharma ji", expanded: true, id: "11"}]}]} });}');
            MakeTreePanel(PlanObjectenStore);
        }
    },
    failure: function (result, request) {
        alert('error:LoadTree method' + result.responseText);
        var jsonData = Ext.decode(result.responseText);
        myMask.hide();
    }
});

On Saving record in table: I use to call like this:
LeftPlanObjectenPanel.root.reload();

Please let me know how can i re-load my tree panel. thanks

mfruizs2 mfruizs2 · Accepted Answer · 2013-05-29T09:52:36

Usually, we can use:

treeStore.getRootNode().appendChild(...);

Example:

var decodedData = Ext.JSON.decode(data);
treeStore.getRootNode().appendChild(decodedData);

ExtJs Tree Panel Not Reload from JSON Store

1 Answers