1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

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

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

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      1  

    Default


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

  4. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default child not expandable even when expandable and not leaf

    child not expandable even when expandable and not leaf


    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!

  5. #4
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default removing all items in the store causes javascript error

    removing all items in the store causes javascript error


    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar