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

[huberte]

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/ )

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

[enno]

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?

[ingo.hefti]

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.

[ingo.hefti]

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.

[huberte]

Is it so complex?

For a non coder, yes !

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

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....