appendChild tree node does not expand

Question

I Have a tree panel where I set some root level nodes on initial load. Then when a node is opened, I have a javascript function which adds child nodes under it.

I have a problem that I cannot get the node to be expandable. It doesn't show the arrow to expand the node.

Here's how I add the child nodes:

var onbeforeitemexpand = function(node, options) {
    if (!node.hasChildNodes()) {
        node.appendChild({
            title:'Should not be expandable',
            checked: false,
            leaf:true
        });
        node.appendChild({
            title:'Should expand',
            checked: false,
            leaf:false,
            expandable:true
        });

};

tree.on('beforeitemexpand', onbeforeitemexpand, null);

But the second child is not expandable. The only way I can get it to be expandable is to add empty children to it like this:

        node.appendChild({
            title:'Should expand',
            checked: false,
            leaf:false,
            expandable:true,
            children:[{}]
        });

But then there will be a empty node underneath it and when I try to add children under this node when it's expanded, the child nodes will go inside the empty node.

Is there some better way to do "lazy loading" of the tree via my own javascript function (not via ajax request..)?

doze doze · Accepted Answer · 2014-10-01T14:48:17

No matter what I tried, I cannot get the > arrow to the nodes when I add a node to the tree via function. I tried the above solution and custom proxy reader.. I finally settled with this:

        Ext.define('Ext.proxy.DocumentNodes', {
            extend: 'Ext.data.proxy.Memory',
            alias: 'proxy.documentnodes',
            read: function(operation, callback, scope) {
                var parent=operation.node;
                var children=[];
                children.push(
                    Ext.create('Document',{
                        title:'Some document',
                        iconCls:'task-folder',
                        checked: false,
                        leaf: false,
                        expandable: true,
                        children: [{tempitem: true}]
                    })
                );
                var result=Ext.create("Ext.data.ResultSet",{records: children});
                Ext.apply(operation, {resultSet: result});
                operation.setCompleted();
                operation.setSuccessful();
                Ext.callback(callback, scope || this, [operation]);
            }
        });

        Ext.define('Document', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'title', type: 'string'},
            ]
        });

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Document',
            proxy: {
                type: 'documentnodes'
            },
            nextId: 1,
            folderSort: false
        });

Then use that store for the tree panel and have onbeforeitemexpand listener for the tree like this:

        var onbeforeitemexpand = function(node, options) {
            var firstChild = node.getChildAt(0);
            if (firstChild.get('tempitem')) {
                node.removeChild(firstChild, true);
            }
            node.store.load({ node: node });
        };

        tree.on('checkchange', oncheckchange, null);
        tree.on('beforeitemexpand', onbeforeitemexpand, null);

What this all does is that at first the proxy reader creates the node and adds an empty node underneath it so the > arrow appears before the node. Then in the beforeitemexpand it checks if the first node is a temp node and removes it and calls a reload for the node which then executes the proxy reader which adds new node underneath the one which has been opened and a temp node under it...

Looks like quite stupid way to do this, but it works and I don't know how else I can get the > arrow to appear before the node if the node doesn't have any children in it but leaf is set to false and expandable is set to true.

Maybe someone has some better answer to this.

appendChild tree node does not expand

1 Answers