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.

image

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.

image

HTH’s!

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP since 2007. In addition, he's a multi-course video author at Pluralsight. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Follow

Get every new post delivered to your Inbox

Join other followers: