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: [

    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.



About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. 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:

Your Comments


Protected with IP Blacklist CloudIP Blacklist Cloud


Get every new post delivered to your Inbox

Join other followers: