Sencha Touch Navigation View - Changing Title does not work on Back Button

Question

I have a Tab Panel as my initial item inside a Navigation View. When I change tab, I'm updating the Title in the Navigation Bar via:

activeitemchange: function(container){
    var navigationView = container.up('navigationview'),
        navigationBar = navigationView.getNavigationBar(),
        newTabTitle = value.tab._title;


    navigationBar.setTitle(newTabTitle);
}

The problem is that when I push a new view onto the Navigation View, the Text for the Back Button uses the old/original Title, and not the updated Title. Clicking the Back Button also sets the Navigation View Title to the old/original Title.

The closest I got to finding a solution was this: http://www.sencha.com/forum/showthread.php?189284-Navigation-View-Title-(IPad-App)

But I get an 'undefined' error on the navigationBar.refreshProxy() call, so I'm assuming that only works for an older version of ST.

Any help would be great, Thanks.

Answer 1

I don't know if you found any answer for this question or solved it by your own since question is quite old. But I tried what you wanted to do and I managed to get the result successfully. So here's the code. I'm following MVC strictly so posting necessary files that need this to work. Basically, views and controllers.

Main.js containing TabPanel

Ext.define('SO.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video'
],
config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            html: [
                "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
            ].join("")
        },
        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    xtype: 'button',
                    text: 'Push a new view!',
                    action:'push_new_view'
                }
            ]
        }
    ]
}

});

Nav.js having navigation view and default item as above tab panel

Ext.define('SO.view.Nav', {
extend: 'Ext.NavigationView',
xtype: 'nav',
config:{
    fullscreen: true,

    items: [
        {
            title: 'Default View',
            xtype:'main'
        }
    ]
}

});

And finally, controller. I did every user interaction handling in controller itself.

Ext.define('SO.controller.Nav',{
    extend:'Ext.app.Controller',
    config:{
        refs:{
            views:['SO.view.Main','SO.view.Nav'],
            navView:'nav',
            tabView:'main'
        },
        control:{
            tabView:{
                activeitemchange:'changeTitle'
            },
            'button[action=push_new_view]':{
                tap:'pushNewView'
            }
        }
    },
    changeTitle:function(container,value,oldValue,eOpts ){
        console.log(value.title);
        this.getNavView().getNavigationBar().setTitle(value.title);
    },
    pushNewView:function(){
        var activeTabTitle = this.getTabView().getActiveItem().title;
        var controller = this;
        controller.getNavView().push({
            title: 'Second',
            html: 'Second view!'
        });
        controller.getNavView().getNavigationBar().getBackButton().setText(activeTabTitle);
        controller.getNavView().getNavigationBar().getBackButton().on('tap',function(self){             
            controller.getNavView().getNavigationBar().setTitle(activeTabTitle);
        });
    }
}

);

As you can see, I've attached function that changes title according to selected tab in changeTitle function.

the function pushNewView pushes new view and let's you ovverride back button behavior on tap. What I did is simply, get activeItem() from tab panel which holds a button that pushes new view. Once we got activeItem we can get it's title and that title need to be set to backButtnoText. So I traverse navigation view and getBackButton instance and simply by calling setText() method changed back button text.

Same time, I've attached event handler to back button, as we do want to change navigation bar title to previous title. So once, use taps back button, we set back the title to title we got in above step. You might want to detach event handler once you're done with eveything as it might cause problems or I'd rather say it'd be good.

Just try this, it just works.

Answer 2

You will need to change the title of the parent viewport, not just to the navigation view tile. Basically the Navigation title is already changing by itself based on the parent view title, and all pushed component title.

var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,

    items: [{
        title: 'Change this title ',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                view.push({
                    title: 'Second Title',
                    html: 'Second view!'
                });
            }
        }]
    }]
});

It should look something like this:

activeitemchange: function(container){
    var newTabTitle = value.tab._title;
    container.setTitle(newTabTitle);
}

Answer 3

//viewAppt is the reference of the view 
//Use this 
viewAppts.query('#headerTitlebar')[0].setTitle('Title');
// Instead of this
this.getApptsHeaderTitlebar().setTitle('Title');