Cannot refresh TreeStore in EXTjs

Question

I'm trying to create a web-page in EXTJs that has two major components:

1. A Form (Ext.form.Panel)
2. A Panel (Ext.tree.Panel)

The form is supposed to get some values, which should populate tree in second panel. In the button handler of the first panel I have access to the updated JSON object, but I cannot figure out a way to refresh the TreeStore that will update the display in tree.Panel.

This is what I have so far :

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

Now I'm trying to update and display the value of this treestore on a button call which looks like this :

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

    }
}
]

But on this button handler I'm always getting a "Uncaught TypeError: Cannot call method 'indexOf' of undefined " on treeStore.removeAll() method, where treestore is clearly defined in this context.

Question 1) What is the correct way to refresh a TreeStore ?

Answer 1

Answer 1)

Instead of:

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

You should do:

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

Note that changing dataObject's data won't affect the store automatically like you seem to think...

Answer 2

this code works for me (ExtJS 4.2.1) Total tree panel nodes refresh example:

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

Replace this.storeDict with your store reference.

In my case:

        JSON.stringify(responseDictObjects.Data)

returns

"[{"id":8,"text":"kkk","leaf":false,"expanded":true,"children":null},{"id":17,"text":"ttttt","leaf":false,"expanded":true,"children":null},{"id":22,"text":"gggg","leaf":false,"expanded":true,"children":null},{"id":23,"text":"qqq","leaf":false,"expanded":true,"children":null},{"id":24,"text":"fff","leaf":false,"expanded":true,"children":null},{"id":27,"text":"fff","leaf":false,"expanded":true,"children":null},{"id":28,"text":"ggggggggggggggggggg","leaf":false,"expanded":true,"children":null},{"id":31,"text":"ttttttttttt666666666","leaf":false,"expanded":true,"children":null},{"id":32,"text":"ffffffffffffffffffff","leaf":false,"expanded":true,"children":null},{"id":33,"text":"kkkkkkkkkkkkk","leaf":false,"expanded":true,"children":null},{"id":35,"text":"7777777777","leaf":false,"expanded":true,"children":null},{"id":36,"text":"999999999999","leaf":false,"expanded":true,"children":null},{"id":37,"text":"iii","leaf":false,"expanded":true,"children":null}]"

---

I found another bug with TreePanel, previosly removed nodes appears after executing appendChild. So i started to use jquery tree plugin (dynatree). All you need is to create empty panel. And after render a panel, embed tree, in my case:

Create empty panel:

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

After rendering panel you can refresh nodes whenever you want:

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