1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    0
    cat4ever is on a distinguished road

      0  

    Default TreeStore giving Cannot call method 'getRootNode' of undefined

    Hi All,
    Newbie here, going through the examples and am stuck on the Trees. While I can get the example Trees view working correctly as shown here:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                },
                {
                    text: 'Child 3',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                }
        
            ]
        }
    })
    Ext.create('Ext.tree.Panel', {
        renderTo: Ext.getBody(),
        title: 'Simple Tree',
        store: store,
        width: 150,
        height: 150
    })
    I'd like to move the definition of the store object to it's own file. When I do it as shown below, I get the noted exception in the panel.js class. Note that I did add the stores object in my controller as shown.

    Controller:
    Code:
        stores: [
        'Users',
        'TreeUsers'
        ]
    .../app/view/user/List.js:

    Code:
    Ext.create('Ext.tree.Panel', {
        renderTo: Ext.getBody(),
        title: 'Simple Tree',
        store: "TreeUsers',
        width: 150,
        height: 150
    })
    .../app/store/TreeUsers.js:

    Code:
    Ext.define('AM.store.TreeUsers', {
        extend: 'Ext.data.TreeStore',
        root: {
            text: 'Root',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                },
                {
                    text: 'Child 3',
                    expanded: true,
                    children: [
                        {
                            text: 'Grandchild',
                            leaf: true
                        }
                    ]
                }
        
            ]
        }
    })

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      1  

    Default

    Hi cat4ever,

    The parent class of "Ext.tree.Panel" looks for the store in the store manager in the "initComponent" method, but "Ext.tree.Panel" tries to use it before.

    There are two other solution.

    If you let your controller create the TreePanel, you can set the store property to an object of your "AM.store.TreeUsers" class or you overwrite the "initComponent" method of your view and set your store manually:
    Code:
    initComponent: function(){ this.store = Ext.data.StoreManager.lookup(this.store);
     
    this.callParent(arguments);}
    



    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    23
    Vote Rating
    0
    delusion is on a distinguished road

      0  

    Default

    I just had the same issue when updating a project form 4.1.2 to 4.1.3

    so I did this

    app.js

    Code:
    Ext.application({   
        views: [
            'MyViewport'
        ],
         models: [
            'MyModel'
        ],
        stores: [
            'MyJsonTreeStore'
        ],
        autoCreateViewport: true,
        name: 'MyApp'
    });

    viewport.js

    Code:
    var treePanel = Ext.create('Ext.tree.Panel',{
                xtype: 'treepanel',
                id:'summaryTree',
                region: 'center',
            name:'treePanel',
              
                //change this
                //store: 'MyJsonTreeStore
                //to this
                store : Ext.create('MyApp.store.MyJsonTreeStore'),
    
    
                rootVisible:false,
                width:600,
                title: 'Report'
    });
    
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
        layout: {
            type: 'border'
        },
        items: [  treePanel    ]
    
    
    });
    so instead of pointing to the class definition as the store, you actually instantiate it. thanks sword-it

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Alex_Dutch is on a distinguished road

      0  

    Default

    If you use instantiate -

    PHP Code:
    storeExt.create('MyApp.store.MyJsonTreeStore'
    you twice load
    .../app/store/TreeUsers.js

    without any necessary.

Thread Participants: 3

Tags for this Thread