Trouble creating a tree!

[olakara]

I am trying to load a tree in an MVC application. And I keep getting this error:

Object MainMenu has no method 'getRootNode'

The tree works fine when I keep my data hard-coded and is directly loaded in to the tree object. Since, I am using MVC, I moved the store separately. like:

 Ext.define('CRM.store.MainMenu', {
    extend: 'Ext.data.TreeStore', 
	
	initComponent: function() {
	
		Ext.apply(this,{
			autoLoad: true,
			proxy: {
				type: 'ajax',
				url: 'data/menu.json'
			},
			root: {
				text: 'Menu',
				id: 'src',
				expanded: true
			}			
		});
		
		this.callParent(arguments);
	}
});

And in my view I have:

Ext.apply(this, {
	title: 'Simple Tree',						
	width: 200,				
	store: 'MainMenu'
});

And, I have provided the store info to my controller as well: stores: ['MainMenu'],

What am I missing? Can somebody point out my mistake?
Thanks in advance,

[vollchraZ]

a treestore has no initComponent method, use the constructor.

[olakara]

a treestore has no initComponent method, use the constructor.

I did try with constructor and still having the same result! Here is my updated code:

constructor: function() {
	
		Ext.apply(this,{
			proxy: {
				type: 'ajax',
				url: 'data/menu.json'
			}
		});
		
		this.callParent(arguments);
	}

[vollchraZ]

where is your root config?

[olakara]

where is your root config?

I tried with and without the root config and get the same error.. here is my code with the root config:

 Ext.define('CRM.store.MainMenu', {
    extend: 'Ext.data.TreeStore', 
	
	constructor: function() {
	
		Ext.apply(this,{
			proxy: {
				type: 'ajax',
				url: 'data/menu.json'
			},
			root: {
				text: 'Menu',
				id: 'src',
				expanded: true
			}
		});
		
		this.callParent(arguments);
	}
});

[medusadelft]

this is a known problem. I have it myself. No solution yet, besides defining your data inside the tree.

[vollchraZ]

medusadelft is right. 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 "CRM.store.MainMenu" 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);
}

[olakara]

medusadelft is right. 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 "CRM.store.MainMenu" 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);
}

@vollchraZ, thanks for the solution. I went with the above code in my view and the application is working fine.

[medusadelft]

I still have problems calling expandAll(), getting the error: this.store.getRootNode is not a function.

[hieu79vn]

Hi


i have the same problem although I put
this.store = Ext.data.StoreManager.lookup(this.store);


Please help! Below is my mvc with tree panel


view.tree

	
	
Ext.define('Pandora.view.OrganisationTree', {    extend: 'Ext.tree.Panel',    alias: 'widget.organisationtree',    requires: 'Pandora.store.Organisations',    store: 'Organisations',         initComponent: function () {                this.store = Ext.data.StoreManager.lookup(this.store);
        Ext.apply(this, {            title: 'Roles & Fournisseurs',            width: 150,            height: 300,            region: 'west',            floatable: false,            root:''                    });        this.callParent();    }});

Store

Ext.define('Pandora.store.Organisations', {
    extend: 'Ext.data.Store',
    model: 'Pandora.model.Organisation',
    requires: 'Pandora.model.Organisation',
    
    //autoLoad: true,
    
    root: {
            expanded: true,


            children:[{text: "Draft", id: 'draft',expanded: false, clsicon: 'icon-reply'},
              {
                text: "All roles and bidders", id: 'all', expanded: true,
                children: [
                { text: "Local roles", id: 'all_roles',expanded: true, children: [
                    { text: "Buyer", id : 'buyer', expanded: true, children: [
                         { text: "dfsqdqsdqs", leaf: true },
                         { text: "Buyer name", leaf: true }
                        ]
                    },
                    { text: "Engineer", id : 'engineer', expanded: true, children: [
                         { text: "sfdsfsdfs", leaf: true },
                         { text: "Engineer name", leaf: true }
                        ]
                    }
                    ]
                },
                { text: "Bidders", id: 'bidder', expanded: true, children: [
                    { text: "fsdfdsfds", id: 'subsea', expanded: true, children: [
                         { text: "[Main] Bidder name 1", leaf: true },
                         { text: "Bidder name 2", leaf: true }
                        ]
                    },
                    { text: "fdsfdsfsdfds", id : 'van', expanded: false, children: [
                         { text: "[Main] Bidder name 3", leaf: true },
                         { text: "Bidder name 4", leaf: true }
                        ]
                    }
                    ]
                }
                ]
             }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        }


});

Model

Ext.define('Pandora.model.Organisation', {
    extend: 'Ext.data.Model',
    fields: ['id', 'text']
});

Controller

Ext.define('Pandora.controller.Organisation', {
    extend: 'Ext.app.Controller',


    refs: [{
        ref: 'organisationTree',
        selector: 'organisationtree'
    }],
    


    stores: ['Organisations'/*, 'SearchResults'*/],
    onLaunch: function () {
        var organisationStore = Ext.create('Pandora.store.Organisations');
        var view = Ext.create('Pandora.view.OrganisationTree');
        view.bindStore(store);
    }
   
});

app.js

Ext.Loader.setConfig({
    enabled:true
});


Ext.application({
    name: 'Pandora',
    models: ['Organisation'],
    stores: ['Organisations'],
    controllers: ['Organisation'],
    launch: function () {
        var x = Ext.create('Pandora.view.Viewport');
    }
});