extjs - Sencha 触摸导航 View - 更改标题在后退按钮上不起作用

Question

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

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


    navigationBar.setTitle(newTabTitle);
}

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

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

但是我在 navigationBar.refreshProxy() 调用中得到一个“未定义”错误，所以我假设它只适用于旧版本的 ST。

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

Answer 1

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

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 具有导航 View 和默认项目如上选项卡面板

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

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

});

最后， Controller 。我在 Controller 本身中完成了每个用户交互处理。

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推送新 View ，让您在点击时覆盖后退按钮行为。我所做的很简单，得到 activeItem()从包含一个按钮的选项卡面板推送新 View 。一旦我们获得了 activeItem 我们就可以得到它的标题，并且该标题需要设置为 backButtnoText .所以我遍历导航 View 和 getBackButton 实例，只需调用 setText()方法更改后退按钮文本。

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

试试这个，它只是有效。