Sencha Touch Navigation View - 更改标题在后退按钮上不起作用

Question

我有一个选项卡面板作为导航视图中的初始项目。当我更改选项卡时，我正在通过以下方式更新导航栏中的标题：

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


    navigationBar.setTitle(newTabTitle);
}

问题是，当我将新视图推送到导航视图时，后退按钮的文本使用旧的/原始标题，而不是更新的标题。单击后退按钮还会将导航视图标题设置为旧的/原始标题。

我最接近找到解决方案的是： http://www.sencha.com/forum/showthread.php?189284-Navigation-View-Title-(IPad-App)

但我在调用 navigationBar.refreshProxy() 时收到“未定义”错误，因此我假设它仅适用于旧版本的 ST。

任何帮助都会很棒， 谢谢。

Answer 1

我不知道你是否找到了这个问题的任何答案，或者你自己解决了这个问题，因为这个问题已经很老了。但是我尝试了您想做的事情，并且成功地获得了结果。所以这里是代码。我严格遵循 MVC，因此发布了需要它工作的必要文件。基本上，视图和控制器。

Main.js 包含 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 具有导航视图和默认项目如上标签面板

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

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

});

最后，控制器。我在控制器本身中进行了每个用户交互处理。

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);
        });
    }
}

);

如您所见，我在changeTitle 函数中附加了根据所选选项卡更改标题的函数。

函数pushNewView 推送新视图，让您在点击时覆盖后退按钮行为。我所做的很简单，从标签面板中获取activeItem()，该面板包含一个推送新视图的按钮。一旦我们获得了 activeItem，我们就可以得到它的标题，并且该标题需要设置为backButtnoText。所以我遍历导航视图和 getBackButton 实例，只需调用setText() 方法更改后退按钮文本。

同时，我已将事件处理程序附加到后退按钮，因为我们确实想将导航栏标题更改为前一个标题。所以有一次，使用点击返回按钮，我们将标题设置回我们在上面的步骤中得到的标题。一旦你完成了一切，你可能想要分离事件处理程序，因为它可能会导致问题，或者我宁愿说它会很好。

试试这个，它很有效。

Answer 2

您需要更改父视口的标题，而不仅仅是导航视图图块。基本上，导航标题已经根据父视图title自行更改，并且所有推送组件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!'
                });
            }
        }]
    }]
});

它应该看起来像这样：

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');