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