Navigation View Title (IPad App)

[senchaSaurav]

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]

It will use the title of the item being pushed.

[bwags]

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]

Shoot...my apologies,

this works:

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

Thanks again!

Brad

[senchaSaurav]

Thanks...

[worthlutz]

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]

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]

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]

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]

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