I don't know if this is the correct way to try to populate a tree on demand, but it is the way I know and I can't say that the official documentation is helpful. I have a tree which first nodes are being loaded form the database, so far so good. Then, if I double click on a node I do this in my controller:

function(item, record, index) {
        var selectedId = record.data.idelement;
        var newStore = Ext.create('mycomponent.mystore', {
            autoDestroy: true,
            idparent: selectedId
        });
        newStore.proxy.extraParams = {idparent: selectedId};
        newStore.removeAll(true);
        newStore.load();
}

I can tell the load function is fetching the right data from the database in the browser's network tab. Nothing happend in the view, the tree remains the same. This is my store:

Ext.define('mycomponent.mystore', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.datatree',
    storeId: 'datatree',
    model: Ext.define('TreeNode', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'text',
            convert: function(v, r) {
                return r.data.text;
            }
        }]
    }),
    restful: true,
    autoLoad: false,
    // autoDestroy: true,
    root: {
        text: 'Loading...',
        id: 'NULL',
        expanded: true
    },
    listeners: {
        'load': function(store, records, successful, operation, eOpts) {
            var children = [];
            for (var i = 0, l = records.length; i < l; i++) {
                var x = records[i].data;
                var child = {
                    idelement: x.idelement,
                    name: x.name,
                    descript: x.descript,
                    active: x.activeo,
                    idparent: x.idparent,
                    text: x.name,
                    leaf: x.isleaf,
                    children: []
                };
                children.push(child);
            }

            if (!store.idpadre) {
                store.loadData(children, false);
            } else {
                var tree = Ext.getCmp('mytree');
                var oldStore = tree.store;
                var idparent = store.idparent;

                var node = oldStore.getRootNode().findChild('idelement', idparent, true);

                if (node && !node.leaf) {
                    node.expand();
                    node.appendChild(
                        {
                            idelement: x.idelement,
                            name: x.name,
                            descript: x.descript,
                            active: x.activeo,
                            idparent: x.idparent,
                            text: x.name,
                            leaf: x.isleaf,
                            children: []
                        }
                    );
                }
            }
        }
    },

    proxy: {
        type: 'ajax',
        headers: {
           'Accept': '*/*',
           'Cache-Control': 'no-cache',
           'Content-Type': 'application/json',
           'Authorization': localStorage.token
        },
        extraParams: {
           'filter[active]': true,
           'filter[idparent][null]': 0
        },

        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success'
        },

        api: {
           read: 'myurl',
           create: 'myurl',
           update: 'myurl',
           destroy: 'myurl'
        },

        autoSave: true
    },
    constructor: function (config) {
        config = Ext.apply({
            rootProperty: Ext.clone(this.rootData)
        }, config);

        this.callParent([config]);
    }
});

Also this is giving me this error:

Uncaught TypeError: Cannot read property 'isVisible' of null
    at constructor.onChildNodesAvailable (ext-all-debug.js:109350)
    at Object.callback (ext-all-debug.js:8705)
    at constructor.onChildNodesAvailable (ext-all-debug.js:110968)
    at Object.callback (ext-all-debug.js:8705)
    at constructor.onProxyLoad (ext-all-debug.js:111930)
    at constructor.triggerCallbacks (ext-all-debug.js:80621)
    at constructor.setCompleted (ext-all-debug.js:80589)
    at constructor.setSuccessful (ext-all-debug.js:80602)
    at constructor.process (ext-all-debug.js:80501)
    at constructor.processResponse (ext-all-debug.js:89534)

What I am trying to do in the store load event is to add a single static node as a child of the selected node just for testing and once done that place in there the real data from the restapi, but I'm unable to do that. According to my logic this should work, but it is not, so what am I doing wrong? What am I missing here?

0 Answers