Tree node not expandable after appending children to it.

[wsi]

Function calls surrounding the creation of Tree Nodes and appending those nodes to a TreePanel do not work as expected. In the example below, I create three nodes: parent, child, grandchild. The relationships of the nodes are as the names suggests, the parent is the root, the child is the child, and the grandchild is a child of child. When I add the child to the parentNode I expect to be able to expand the parent and the child. If you run the example with EXTJS 4.1.1a or EXTJS 4.1.3 you find that this is not the case. The child can not be expanded.

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


var treeStore = Ext.create('Ext.data.TreeStore', {});


var treePanel = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    rootVisible: false,
    renderTo: Ext.getBody(),
    store: treeStore
});


//Get root node from the store
var parentNode = treePanel.getStore().getRootNode();
parentNode.removeAll(true);


//Create child node
var childNode = Ext.create('Ext.data.ObjectTypeModel', {});
Ext.data.NodeInterface.decorate( childNode );
childNode.set('text', "ChildNode");
childNode.set('expandable', true );


//Create grandchild node
var grandchildNode = Ext.create('Ext.data.ObjectTypeModel', {});
Ext.data.NodeInterface.decorate( grandchildNode );
grandchildNode.set('text', "GrandChildNode");
grandchildNode.set('expandable', true );


//Append the nodes
childNode.appendChild( grandchildNode );
parentNode.appendChild( childNode );


console.log( "Child node expandable?      " + childNode.isExpandable() );
console.log( "Grandchild node expandable? " + grandchildNode.isExpandable() );

[vietits]

You should decorate the model class not model instances. Try to fix your code as below:

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


Ext.data.NodeInterface.decorate( Ext.data.ObjectTypeModel );


var treeStore = Ext.create('Ext.data.TreeStore', {});


var treePanel = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    rootVisible: false,
    renderTo: Ext.getBody(),
    store: treeStore
});


//Get root node from the store
var parentNode = treePanel.getStore().getRootNode();
parentNode.removeAll(true);


//Create child node
var childNode = Ext.create('Ext.data.ObjectTypeModel', {});
//Ext.data.NodeInterface.decorate( childNode );
childNode.set('text', "ChildNode");
childNode.set('expandable', true );


//Create grandchild node
var grandchildNode = Ext.create('Ext.data.ObjectTypeModel', {});
//Ext.data.NodeInterface.decorate( grandchildNode );
grandchildNode.set('text', "GrandChildNode");
grandchildNode.set('expandable', true );


//Append the nodes
childNode.appendChild( grandchildNode );
parentNode.appendChild( childNode );


console.log( "Child node expandable?      " + childNode.isExpandable() );
console.log( "Grandchild node expandable? " + grandchildNode.isExpandable() );

[wsi]

I'm not sure if this is a bug or not but I thought I would throw this out there and see what kind of answer I get back. I ran the counter example posted and it worked fine and all and then decided to change the leaf property of the grandchild to false. Note that the grandchild's expandable property is already set to true. I, however, noticed that the tree rendered did not put a plus sign on the grandchild. Is this normal? If it is, how would anyone solve the problem of building a tree as a user expands nodes. Thanks!

[wsi]

Adding the line right below the working example causes javascript errors:

treePanel.getStore().removeAll();

It complains that the store does not have a remove method. After checking the documentation for Ext.data.TreeStore, it indeed does not have a remove method.