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（）调用中遇到了'undefined'错误，所以我假设它只适用于较旧版本的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()方法改变后退按钮文本即可。

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

试试这个，它只是有效。

Answer 2

您需要更改父视口的标题，而不仅仅是导航视图图块。基本上，导航标题已经根据父视图标题和所有推送的组件标题自行更改。

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

Sencha Touch导航视图 - 更改标题不适用于后退按钮

3 个答案: