TreeStore giving Cannot call method 'getRootNode' of undefined

[cat4ever]

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:

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:

    stores: [
    'Users',
    'TreeUsers'
    ]

.../app/view/user/List.js:

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

.../app/store/TreeUsers.js:

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
                    }
                ]
            }
    
        ]
    }
})

[sword-it]

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:

initComponent: function(){ this.store = Ext.data.StoreManager.lookup(this.store);
 
this.callParent(arguments);}

[delusion]

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

so I did this

app.js

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

viewport.js

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