Unable to get the expandable property even when leaf property is set to false.

[niteshshakya]

I recently updated the app that i am working on to 4.1 from 4.0.7 and haven't been able to get the expandable property for a tree node without having child elements in it. It used to work in 4.0.7, but now i don't get the expand property in 4.1. The error is shown below:

I use the following code to insert instance to the root node.
node.appendChild({text: "Instances", leaf: false});
I also tried to use following codes but all was in vain.
node.appendChild({text: "Instances", leaf: false, expandable: true, isModel: false });
node.appendChild({text: "Instances", leaf: false, expandable: true});

Has anyone come across this?
Thanks in advance for your help

[vietits]

The what is your problem? How do you get expandable property of a node?

[niteshshakya]

I am not getting the expand property for the "instance" node as shown in the picture, which is not a leaf element. According to the sencha doc you should get the expand property if the leaf is false. I do the same still the element doesn't have expandable property.

Does this explanation help?

[vietits]

Ext.data.NodeInterface does not have 'expand' property. It has expand() method instead.

[niteshshakya]

leaf : Boolean
Set to true to indicate that this child can have no children. The expand icon/arrow will then not be rendered for this node.

According to this if this is set to false the expand icon/arrow which when clicked will fire the expand event should be rendered. But even when doing so, it doesnt render it. I am referring this rendering as expand property.

The node interface does have a expandable property which i set to true but still get same error. There is no expand icon rendered.

And for this I couldnt find a solutoin.

I did get a way around it by having predefined "dummy" child nodes, which added the expand icon.
But its really a bad way around since i am doing extra stuff.

Wish there was a way that i could have sencha require the rendering of the expand icon

[vietits]

According to the code of NodeInterface, a node is rendered with expanding icon only when its expandable property set to true and it is not a leaf and it has one or more children.

Below is my solution to override this behaviour to render expanding icon when a node is a folder and its expandable set to true or it has at least one child.

// store will be used by the tree panel
var store = Ext.create('Ext.data.TreeStore', {
    ...
    listeners: {
        append: function(parent, node){
            node.isExpandable = function() {
                return !this.isLeaf() && (this.get('expandable') || this.hasChildNodes());
            }
        }
    }
})