1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    Tomeo is on a distinguished road

      0  

    Default Unanswered: Tree navigation in MVC architecture

    Unanswered: Tree navigation in MVC architecture


    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
    Code:
    {
        '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
    Code:
    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
    Code:
    Ext.define('Doprava.store.NavigationTrees', {
        extend: 'Ext.data.Store',
        requires: 'Doprava.model.NavigationTree',
        model: 'Doprava.model.NavigationTree'
    });
    Viewport:
    /app/view/Viewport.js
    Code:
    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
    Code:
    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
    Code:
    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

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    Tomeo is on a distinguished road

      0  

    Default


    TreePanel modification app/view/NavigationTreePanel.js:

    Code:
    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:
    Code:
    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 ?

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    Tomeo is on a distinguished road

      0  

    Default


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

    /app/store/NavigationTrees.js
    Code:
    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

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    Tomeo is on a distinguished road

      0  

    Default


    No one could help?

Tags for this Thread