PDA

View Full Version : Navigation View Title (IPad App)



senchaSaurav
19 Mar 2012, 12:19 PM
Hi,
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?

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

bwags
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!!

Brad

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

this works:




this.getMyViewport().push({
xtype : 'myContainer',
title : record.get('title')
});



Thanks again!

Brad

senchaSaurav
5 Apr 2012, 12:35 PM
Thanks...

worthlutz
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?

Worth

bwags
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() {
this.getTestView().push({
xtype : 'testviewone',
title : 'Test View One',
});
},


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


this.getTestView().push({
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.

Brad

worthlutz
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:


getView().query('titlebar')[0].setTitle('newTitle);

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.

Worth

tarun_juneja@hotmail.com
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');

coolate
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');
bar.titleComponent.setTitle(title);
bar.refreshProxy();

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