Ext Js Tree Panel - MVC model

[hieu79vn]

Hello

I would like to do a simple Tree Panel with static data in MVC model but I always have an error id is null. Could you please give me an example?
Thank you

Hieu

[hieu79vn]

Now I still have a problem with Object [object Object] has no method 'getRootNode'. Below is my code.

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');
    }
});

[hieu79vn]

OK, I found the solution.

just change Store to TreeStore
That's all.+ lookup store