1. #1
    Sencha User senchaSaurav's Avatar
    Join Date
    Feb 2012
    Location
    Bangalore, India
    Posts
    41
    Vote Rating
    0
    senchaSaurav is on a distinguished road

      0  

    Default Navigation View Title (IPad App)

    Navigation View Title (IPad App)


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It will use the title of the item being pushed.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Illinois
    Posts
    93
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default Dynamically...

    Dynamically...


    But what if you want to set the title dynamically?

    For example, inside a controller:

    Code:
    this.getMyNavigationView().push({xtype : 'someContainerView'});
    The SomeContainerView is an 'Ext.Container', which does not have a 'setTitle()' method.

    So I find myself doing

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

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Illinois
    Posts
    93
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default Solved

    Solved


    Shoot...my apologies,

    this works:

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

    Brad

  5. #5
    Sencha User senchaSaurav's Avatar
    Join Date
    Feb 2012
    Location
    Bangalore, India
    Posts
    41
    Vote Rating
    0
    senchaSaurav is on a distinguished road

      0  

    Default


    Thanks...

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    North Carolina
    Posts
    291
    Vote Rating
    12
    worthlutz is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Location
    Illinois
    Posts
    93
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default This kind of works.

    This kind of works.


    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.

    Code:
    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.

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

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    North Carolina
    Posts
    291
    Vote Rating
    12
    worthlutz is on a distinguished road

      0  

    Default


    I've figured this out today but don't have access to my code tonight.

    It went something like this:

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

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    tarun_juneja@hotmail.com is on a distinguished road

      1  

    Default


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

  10. #10
    Sencha User
    Join Date
    Sep 2011
    Location
    South Bend, IN
    Posts
    26
    Vote Rating
    0
    coolate is on a distinguished road

      0  

    Default


    I used this to get it working:
    via: Joeri Sebrechts

    Code:
    var bar = this.getMain().getNavigationBar();
    if (bar.titleComponent.element) bar.titleComponent.element.setWidth('auto');
    bar.titleComponent.setTitle(title);
    bar.refreshProxy();