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)

    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,992
    Vote Rating
    1193
    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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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
    97
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default 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
    97
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default 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
    Hillsborough, NC
    Posts
    434
    Vote Rating
    133
    worthlutz is just really nice worthlutz is just really nice worthlutz is just really nice worthlutz is just really nice

      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
    97
    Vote Rating
    2
    bwags is on a distinguished road

      0  

    Default 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
    Hillsborough, NC
    Posts
    434
    Vote Rating
    133
    worthlutz is just really nice worthlutz is just really nice worthlutz is just really nice worthlutz is just really nice

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