Tree navigation in MVC architecture

[Tomeo]

Hello,

I'm trying to build some app based on MVC and I have a problem with implementing Tree navigation into Navigation Panel.

Here is my bit of code:

/data/navigationTree.json

{
    'success': true,    
    'results': [{
                text:'Main node 1',
                expanded: true,
                children:[{
                              text:'Absolute',
                              id:'absolute',
                              leaf:true
                          },{
                              text:'Accordion',
                              id:'accordion',
                              leaf:true
                          },{
                              text:'Anchor',
                              id:'anchor',
                              leaf:true
                          },{
                              text:'Border',
                              id:'border',
                              leaf:true
                          }]
                },{
                text:'Main node 2',
                children:[{
                              text:'Aaaaa',
                              id:'center',
                              leaf:true
                          }]
                },{
                text:'Main node 3',
                children:[{
                              text:'Absolute Layout Form',
                              id:'abs-form',
                              leaf:true
                          },{
                              text:'Tabs with Nested Layouts',
                              id:'tabs-nested-layouts',
                              leaf:true
                          }]
                }
              ]
}

Model is defined as:
/app/model/NavigationTree.js

Ext.define('Doprava.model.NavigationTree', {
    extend: 'Ext.data.Model',
    fields: ['id', 'text', 'href', 'leaf'],
    
    proxy: {
        type: 'ajax',
        url: 'data/navigationTree.json',
        reader: {
            type: 'json',
            root: 'results'
        }
    }
});

Related store:
/app/store/NavigationTrees.js

Ext.define('Doprava.store.NavigationTrees', {
    extend: 'Ext.data.Store',
    requires: 'Doprava.model.NavigationTree',
    model: 'Doprava.model.NavigationTree'
});

Viewport:
/app/view/Viewport.js

Ext.define('Doprava.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    title: 'Ext Layout Browser - Doprava Viewport'
   
     
    ,requires: [
        'Doprava.view.TopPanel' ,
        'Doprava.view.TabPanel' ,
        'Doprava.view.NavigationPanel' ,
        'Doprava.view.BottomStatusBar' /*,
        'Pandora.view.RecentlyPlayedScroller',
        'Pandora.view.SongInfo'  */       
    ]
    
    ,initComponent: function() {
        this.items = [
            {
                xtype: 'tabPanel'
            },
            {
                xtype: 'navigationPanel'
            },
            {
                xtype: 'topPanel'
            },
            {
                xtype: 'bottomStatusBar'
            }
        ];
        this.bbar = {
            xtype: 'bottomStatusBar'
        };
        this.callParent();
    }
       
});

Where related west navigation panel is defined as:
/app/view/NavigationPanel.js

Ext.define('Doprava.view.NavigationPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.navigationPanel',
    xtype: 'panel',
    autoScroll: true,
    width: 220,
    collapsible: true,
    title: 'Navigation',
    cmargins: '3 3 3 3',
    collapsible: true,
    margins: '3 0 3 3',
    region: 'west',
    split: true
    
    ,requires: [
        'Doprava.view.NavigationTreePanel'    
    ] 
    
    ,initComponent: function() {
        this.items = [
            {
                xtype: 'container',
                height: 300,
                activeItem: 0,
                defaults: {
                    // applied to each contained panel
                    bodyStyle: 'padding:15px'
                },
                layout: {
                    collapseFirst: true,
                    animate: true,
                    type: 'accordion'
                },
                items: [
                    {
                        //xtype: 'panel',
                        xtype:'navigationTreePanel',
                        autoScroll: true,
                        title: 'Tree Navigation'
                    },
                    {
                        xtype: 'panel',
                        title: 'Settings'
                    }
                ]
            }
        ];
        this.callParent();
    }
});

and
/app/view/NavigationTreePanel.js

Ext.define('Doprava.view.NavigationTreePanel', {
    extend: 'Ext.tree.TreePanel',
    alias: 'widget.navigationTreePanel',
    xtype: 'treepanel',
    title: 'Navigation Tree Panel',
    
    // tree-specific configs:
    rootVisible: false,
    lines: true,
    singleExpand: true,
    useArrows: true,
    store: 'Stations',     
    initComponent: function() {
        this.root = {
            leaf: false,
            expanded: true,
            text: 'Tree Root',
            draggable: false
            //,children: jsonTreeData
        };
        this.loader = {
            clearOnLoad: false,
            preloadChildren: true,
            pathSeparator: '>'
        };
        this.callParent();
    }
});

My problem is correct tree definition, in files NavigationTreePanel.js and NavigationPanel.js, so it will call related model and store and as a result display it as a tree navigation.

Any ideas what't wrong?

Many thanks,
Tomas

[Tomeo]

TreePanel modification app/view/NavigationTreePanel.js:

Ext.define('Doprava.view.NavigationTreePanel', {
    extend: 'Ext.tree.TreePanel',
    alias: 'widget.navigationTreePanel',
    xtype: 'treepanel',
    title: 'Navigation Tree Panel',
    
    stores: ['NavigationTrees'],
    
    initComponent: function() {
        Ext.apply(this, {
            store: Ext.data.StoreManager.lookup('NavigationTrees'),
    
            items: {
                 title: 'Some title' ,
                 dataIndex: 'text'      
            }                           
        });                             
        this.callParent(arguments);
    }
   
   
});

When using above script, I'm getting an error:

me.store.getRootNode is not a function

[IMG]chrome://firebug/content/blank.gif[/IMG]            node: me.store.getRootNode(), 

Any idea what can cause it?
Or how to properly define a above tree ?

[Tomeo]

Ok, above error could be caused by incorrect store definition:

/app/store/NavigationTrees.js

Ext.define('Doprava.store.NavigationTrees', {
    extend: 'Ext.data.TreeStore',
    requires: 'Doprava.model.NavigationTree',
    model: 'Doprava.model.NavigationTree'
});

But anyway, my tree still does now show

[Tomeo]

No one could help?