Adding Logout Button To NavigationView TitleBar in SenchaTouch 2 and Sencha Architect

You would think this would be easy to do in Sencha Touch.  That is, you have something like what I have below, a conference presenter list, and you want a logout button on the title bar.

It turns out it’s not obvious.  Thank goodness for a comment in the SenchaTouch Doc comment section from @dgotty the solution presents itself.

The actual class definition is as follows:

Ext.define('CCApp.view.PresenterNavView', {
    extend: 'Ext.navigation.View',
    alias: 'widget.presenternavview',

    requires: [
        'CCApp.view.Presenter'
    ],

    config: {
        autoDestroy: false,
        items: [
            {
                xtype: 'presenterlist'
            }
        ],
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    text: 'Logout',
                    align: 'right',
                    handler: function() {
                         var mainPanel = Ext.ComponentQuery.query("toppanel")[0];
                        mainPanel.animateActiveItem(0,{type: 'flip' });
                    }
                }
            ],
            docked: 'top'
        }
    }

});

Getting it into Sencha Architect is a little trickier.

What is needed it to create the items array, then past in the items code.  It looks like this.

HTH’s!