Hello friends -

I'm struggling a bit with changing values on labels after an event and having that change stick across page loads/hides/shows. For example, I'd like to have a label on a toolbar that shows me the name of a user after they've logged in. I like to share this value on a toolbar that is linked across several views; however, a change at controller action time doesn't seem to make the change persistent. I can get the value to change (i.e., 'Welcome', to 'Welcome, Brian') at one page load, but when I move on to another page, I'm stuck back with the initial html for the object.

Here is a short example I built showing what I'm experiencing.

Views:

[Note: sharing toolbar]
Code:
Ext.define('MyApp.view.MyToolbar', {    extend: 'Ext.Toolbar',
    alias: 'widget.MyToolbar',


    config: {
        docked: 'bottom',
        html: 'Initial HTML!s',
        id: 'MyToolbar',
        itemId: 'MyToolbar',
        items: [
            {
                xtype: 'label',
                html: 'Fun Label',
                id: 'MyLabel',
                itemId: 'MyLabel',
                width: 150
            },
            {
                xtype: 'button',
                html: 'Push here',
                id: 'MyButton',
                itemId: 'MyButton',
                text: 'MyButton'
            }
        ]
    }


});
Code:
Ext.define('MyApp.view.MyPanel', {    extend: 'Ext.Panel',


    requires: [
        'MyApp.view.MyToolbar'
    ],


    config: {
        html: 'First Panel',
        id: 'MyPanel',
        itemId: '',
        items: [
            {
                xtype: 'MyToolbar'
            },
            {
                xtype: 'button',
                id: 'ButtonTwo',
                itemId: 'ButtonTwo',
                text: 'Click me!'
            }
        ]
    }


});
Code:
Ext.define('MyApp.view.anotherPanel', {    extend: 'Ext.Panel',


    alternateClassName: [
        'anotherPanel'
    ],
    requires: [
        'MyApp.view.MyToolbar'
    ],


    config: {
        html: 'Another Panel',
        id: 'anotherPanel',
        itemId: 'anotherPanel',
        items: [
            {
                xtype: 'MyToolbar'
            }
        ]
    }


});
Controller:

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


    config: {
        refs: {
            anotherPanel: '#anotherPanel',
            myPanel: '#MyPanel',
            toolbarButton: '#MyLabel',
            ButtonTwo: '#ButtonTwo'
        },


        control: {
            "button#ButtonTwo": {
                tap: 'onButtonTap'
            }
        }
    },


    onButtonTap: function(button, e, options) {
        console.log("button hit");
        var anotherPanel = this.getAnotherPanel();
        var firstPanel = this.getMyPanel(); 
        var buttonTwo = this.getButtonTwo();

        var theButton = this.getToolbarButton(); 


        theButton.setHtml("super test deluxe");


        console.log("the html should be rendering differently"); 
        console.log(theButton.getHtml()); // LOGS UPDATED VALUE IN THE CONSOLE


        console.log(theButton); 


        Ext.Viewport.add(anotherPanel); 
        anotherPanel.show(true); // AT SHOW TIME, THE BUTTON RENDERS ORIGINAL VALUE 
        firstPanel.hide();
    },




});
Note: If I do not link the toolbar across views, and only show it on 'anotherPanel', I get the html that I would like, but this largely defeats the purpose of sharing a component.

Any insight is GREATLY appreciated.
brian