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

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' 
       } 
      ] 
     } 
    ] 
} 

}）;具有导航视图和默认项作为标签面板上述

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

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

}）

Nav.js;

最后，控制器。我在控制器中处理了每个用户交互操作。

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推动新的视图，让我们你ovverride返回按钮的行为。我所做的只是简单地从标签面板拿到activeItem()，它包含一个推动新视图的按钮。一旦我们获得了activeItem，我们可以得到它的标题，该标题需要设置为backButtnoText。所以我遍历导航视图和getBackButton实例，并简单地通过调用setText()方法改变了后退按钮文本。

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

只是试试这个，它只是工作。

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