View Full Version : Navigation View Title (IPad App)

19 Mar 2012, 12:19 PM
On a tap of item, how to set the title of the Navigation View dynamically?
For e.g.: The item value which I have selected, I want to set the same value on the title of Navigation View.
How can I do it?

19 Mar 2012, 12:21 PM
It will use the title of the item being pushed.

5 Apr 2012, 11:27 AM
But what if you want to set the title dynamically?

For example, inside a controller:

this.getMyNavigationView().push({xtype : 'someContainerView'});

The SomeContainerView is an 'Ext.Container', which does not have a 'setTitle()' method.

So I find myself doing

this.getSomeContainerView().config.title = record.get('title');

Is there a better way around this? It doesn't quite feel right :)

Thanks for any ideas!!


5 Apr 2012, 11:42 AM
Shoot...my apologies,

this works:

xtype : 'myContainer',
title : record.get('title')

Thanks again!


5 Apr 2012, 12:35 PM

10 Apr 2012, 7:30 AM
What if the view is already pushed and you are popping back to it after a store reload and want to change the title?

How would that be done?


11 Apr 2012, 5:06 PM
I'm trying to get something to work but haven't quite been able to. Here's some code.

A NavigationView, Panel (testviewone) to be initially pushed, and another Panel (testviewtwo) to be pushed and popped via a button in view one.

Ext.define('MyApp.view.util.TestView', { extend : 'Ext.NavigationView',
alias : 'widget.testview',


Ext.define('MyApp.view.util.TestViewOne', {
extend : 'Ext.Panel',
alias : 'widget.testviewone',

config : {
html : 'Test View One',

items : [ {
xtype : 'button',
id : 'newviewbutton',
text : 'View Two',
} ]

Ext.define('MyApp.view.util.TestViewTwo', {
extend : 'Ext.Panel',
alias : 'widget.testviewtwo',

config : {
html : 'Test View Two',

Finally a controller for all the logic.

Ext.define('MyApp.controller.TestController', {
extend : 'Ext.app.Controller',

requires : [ 'MyApp.view.util.TestViewOne',
'MyApp.view.util.TestViewTwo' ],

config : {
refs : {
testView : 'testview',
testViewOne : 'testviewone',
testViewTwo : 'testviewtwo',
newViewButton : 'testviewone #newviewbutton'

control : {
testView : {
show : 'pushViewOne',
pop : 'changetestviewtitle',

newViewButton : {
tap : 'pushViewTwo'

pushViewOne : function() {
xtype : 'testviewone',
title : 'Test View One',

pushViewTwo : function() {
console.log('Pushing View');

xtype : 'testviewtwo',
title : 'Brand New Title'

changetestviewtitle : function() {
console.log('Changing test view title');
this.getTestViewOne().config.title = 'New One!';
this.getTestViewOne().setHtml('New HTML!');

Open and click the button to push testviewtwo, then pop with the back button. Now in your developer console run 'Ext.ComponentQuery.query('testviewone');'.

Notice the config.title="New One!" but t is not reflected in the title bar. I don't think I would call this a bug because the title attribute is not advertised as public or settable, but more control over the title attribute would be really nice.


11 Apr 2012, 5:28 PM
I've figured this out today but don't have access to my code tonight.

It went something like this:


My views were just containers and I added a title bar to them.

If the component already has a title, is there already a "titlebar" to query for and then set the title?

I'll try to send more information tomorrow.


12 Apr 2012, 2:02 AM
add this override

Ext.override(Ext.navigation.Bar, {
getNavigationBarProxyProperties: function () {
return {
title: {
left: this.proxy.titleComponent.renderElement.getLeft()
backButton: {
left: this.proxy.backButton.renderElement.getLeft(),
width: this.proxy.backButton.renderElement.getWidth()

and get the bar like this and set title dynamically

var bar = mainViewComponent.getNavigationBar();
bar.titleComponent.setTitle('dynamic title');

28 Apr 2012, 6:29 PM
I used this to get it working:
via: Joeri Sebrechts

var bar = this.getMain().getNavigationBar();
if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');

1 May 2012, 5:04 AM
Thanks coolate that worked for me.