Add (right) Button to Sencha Navigation View

sencha-touch-2

Solution

You can try this code (in Chrome Developer Tools' console) on the Sencha Touch 2 Navigation View example :

Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add({
    xtype:'button',
    text:'Right',
    align:'right'
});

It basically get the `navigationview`, then the navigation bar of this view and finally add the button to it.

This is the proper way to add a button to the navigation bar.

Hope this helps

Problem

I want to dynamically add a (right aligned) button to the active navigation view depending on view Im showing. Is there any proper way to do it? I found many half good examples online, but didnt get them to work. Here is what I tried: ``` Ext.define('Sencha.view.user.Login', { extend:'Ext.navigation.View', //fullscreen: true, xtype: 'loginview', requires:[ 'Ext.form.FieldSet', 'Ext.field.Email', 'Ext.field.Password' ], config: { title: 'Log in', iconCls: 'use', cls: 'kidsbackground', scrollable: false, navigationBar: { items: [ ] }, items:[ { xtype: 'loginform' } ] }, addRightButton:function(button){ var navigationBar = this.config.navigationBar; console.log("navigationBar: "+navigationBar); var rightButton = Ext.Button.create({ xtype: 'button', ui: 'action', iconCls: 'action', iconMask: true, align: 'right' }); console.log("rightButton: "+rightButton); //navigationBar.addItem(rightButton); var oNavigationbar = { docked: 'top', backButton : { margin: 7, docked: "left", ui : 'back' }, items: [ Ext.create("Ext.Button", { text: "Button1" }), Ext.create("Ext.Button", { text: "Button2", align: "right" }) ] }; this.setNavigationBar(oNavigationbar); /*this.setNavigationBar({ items: [ { id: 'rightButton', xtype: 'button', text: 'yes!' //placeHolder: 'Search...', //align: 'right' } ] });*/ console.log("wow, no crash, really ?"); } }); ``` When I run the above code I get strange errors, one of this is this (see attachment):

Original source