Results 1 to 4 of 4

Thread: Tree node not expandable after appending children to it.

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    2
      0  

    Default Answered: Tree node not expandable after appending children to it.

    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.


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

  2. You should decorate the model class not model instances. Try to fix your code as below:
    Code:
    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() );

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •