Viewport Apply Conditional Toolbar with Sencha Touch

Question

Im going to MVC route with Sencha. I have a Viewport panel initialized much like the twitter example:

/**
* @author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl   : 'Viewport/index',
name         : 'App',
icon         : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory   : false,
//useLoadMask : true,

launch: function() {
    Ext.Viewport.init();
    Ext.Viewport.onOrientationChange();

    this.viewport = new App.Viewport({
        application: this
    });

    Ext.dispatch({
        controller: 'User',
        action    : 'index'
    });
}
});

/**
* @class App.Viewport
* @extends Ext.Panel
* This is a default generated class which would usually be used to initialize your     application's
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id        : 'viewport',
layout    : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',

initComponent: function() {

    Ext.apply(this, {

        dockedItems: [
            {
                // Top Bar
                dock   : 'top',
                xtype  : 'toolbar',
                title  : 'Whats Good',
                items: [
                    {
                        text: 'About'
                    },

                ]
            }


        ]
    });


App.Viewport.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('App.Viewport', App.Viewport);

New Code:

if (!App.viewport.getDockedComponent(homeBar)) {
        var homeBar = new App.HomeBar();
        App.viewport.addDocked(homeBar);
    }

I want to be able to conditionally apply DockedItems (toolbars) based on which Type of panel is currently rendered in the Viewport. EG: one for Login, Home screen, detail screen, etc.

I've tried using Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]}); But that doesn't work. Currently it works to add the toolbar to the currently rendered Panel and setting it to fullscreen, but unfortunately transitions and things behave weirdly as the structure is

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

Does anyone have a suggestion?

Answer 1

To programmatically add a docked item, I would recommend using

viewport.addDocked(loginBar);

Methods like this are far better than trying to update the original configuration of the component.

Then there is also a .removeDocked() method to take it off again.

Also make sure you are dealing with instances of the components, not trying to update their class.

Answer 2

To get the reference to your application's viewport, you can come in through the 'App' namespace, which is automatically created by the name property of the regApplication config.

So you could make your toolbar button do this for example:

{
    text: 'About',
    handler: function() {
        App.viewport.getDockedItems()[0].setTitle('Pressed!');
    }
},

Which would make the title change when you press the button.

But now I better understand what it is you are trying to do, I recommend you don't dock a single, dynamically-changed toolbar to the outer viewport, but add individual toolbars to each of the (card) panels in it. That way they get to slide nicely too ;-)