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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar