Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    175
    Vote Rating
    9
    huberte will become famous soon enough

      0  

    Default Answered: NavBar problem (Navigation view, Tab Panel and item tap on list)

    Answered: NavBar problem (Navigation view, Tab Panel and item tap on list)


    I'm struggling with the nav bar and it's driving me crazy for weeks....

    For now, I'm stuck with the navbar on first view, I don't want it there, but if not, I'll not have the back button on the second view. And if I get this back button on the second view, I'll end with 3 nav bars ont the third view !!!! I need a recursive nav bar.

    see example here : http://www.sciences-physiques.eu/app...ewtab/testing/

    code in there : http://dl.free.fr/pCTBTNkNp

    I tried with this code (thanks to Nikolaj Borisik) (example here : http://www.sciences-physiques.eu/appli/navpush/ )

    Code:
    Ext.define('navpush.view.Main', {
        extend: 'Ext.navigation.View',
    
    
        config: {
            ui: 'light',
            autoDestroy: false
    
    
        },
    
    
        constructor : function(){
            this.callParent(arguments);
    
    
            this.firstTabPanel = Ext.create('Ext.tab.Panel',{
                title: 'MyTabPanel1',
                layout: {
                    animation: 'fade',
                    type: 'card'
                },
                items: [
                    {
                        xtype: 'container',
                        title: 'Tab 1',
                        iconCls: 'info',
                        html : 'TAB 1'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 2',
                        iconCls: 'info',
                        html : 'TAB 2'
                    },
                    {
                        xtype: 'list',
                        title: 'Tab 3',
                        iconCls: 'info',
                        html : 'TAB 3',
                        store: {
                                      fields: ['name'],
                                      data: [
                                        {name: '1st item'},
                                        {name: '2nd item'}                                
                                      ]
                                    },
                        onItemDisclosure: true,
    
    
                        itemTpl: '{name}',
    
    
                        listeners: {
                                        
                           itemtap: function (view, index, target, record, evt) {
                                                 
    
    
                                if(index==0){
                                    var x = 1;
                                }
                                else if(index==1){
                                    var x = 2;
                                }    
                                                                        
                            }
                        }
                                
                                
                    }
                ],
                tabBar: {
                    docked: 'bottom'
                }
            });
    
    
            this.secondTabPanel = Ext.create('Ext.tab.Panel',{
                title: 'MyTabPanel2',
                items: [
                    {
                        xtype: 'container',
                        title: 'Tab 4',
                        iconCls: 'info',
                        html : 'TAB 4'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 5',
                        iconCls: 'info',
                        html : 'TAB 5'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 6',
                        iconCls: 'info',
                        html : 'TAB 6'
                    }
                ],
                tabBar: {
                    docked: 'bottom'
                }
            });
    
    
            this.thirdTabPanel = Ext.create('Ext.tab.Panel',{
                title: 'MyTabPanel3',
                items: [
                    {
                        xtype: 'container',
                        title: 'Tab 7',
                        iconCls: 'info',
                        html : 'TAB 7'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 8',
                        iconCls: 'info',
                        html : 'TAB 8'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 9',
                        iconCls: 'info',
                        html : 'TAB 9'
                    }
                ],
                tabBar: {
                    docked: 'bottom'
                }
            });
    
    
            this.firstTabPanel.on('activeitemchange', this.tabPanel1ActiveItemChange, this);
    
    
            //show first tab panel
            this.push(this.firstTabPanel);
        },
    
    
        tabPanel1ActiveItemChange : function(tabpanel, newtab){
            //if newtab is third tab than show second tab panel
            if(this.firstTabPanel.getInnerItems().indexOf(newtab)=== 1){
                this.push(this.secondTabPanel);
            }
    
    
        }
    });
    but it seems a little bit complicated.

    what am I doing wrong with those multiple nav bars ? HOw can I easily manage those bars ?

    thanks

    PS : yous should see a strange image on the first view. I don't know why but chrome has difficulties to display this svg

  2. To illustrate what I'm talking about I refactored your app. The zip contains the whole project minus the ST touch folder (V2.1) and the resources folder. Hope that helps.

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Location
    Germany
    Posts
    72
    Answers
    8
    Vote Rating
    2
    enno is on a distinguished road

      0  

    Default


    My Suggestion is:
    Create a controller where you can Create a reference to your Navigation View and there you can get a reference to your NavigationView Navigationbar.

    You can also write a Funktion to hide it in your app.js to hold it small the example.

    Maybe this could give you a hint:
    http://www.sencha.com/forum/showthre...on-Bar-Problem

    And at the end the link with the example of yours is good but why do you post other code not your own?
    Is it so complex?

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    I think you should refactor your project using MVC style, breaking down everything to small components. These long config sections make it almost impossible to set up things correctly so that the framework can work as expected.

  5. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      1  

    Default


    To illustrate what I'm talking about I refactored your app. The zip contains the whole project minus the ST touch folder (V2.1) and the resources folder. Hope that helps.
    Attached Files

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    175
    Vote Rating
    9
    huberte will become famous soon enough

      0  

    Default


    Quote Originally Posted by enno View Post
    Is it so complex?
    For a non coder, yes !

    Quote Originally Posted by ingo
    These long config sections make it almost impossible to set up things correctly so that the framework can work as expected.
    You're right ! The code is far more readable ! thanks

    Quote Originally Posted by ingo
    To illustrate what I'm talking about I refactored your app. The zip contains the whole project minus the ST touch folder (V2.1) and the resources folder. Hope that helps.
    I think it could help a lot of people. I saw a lot of question regarding this nav bar. Github, bloging this, could help a lot....

Thread Participants: 2

Tags for this Thread