Add (right) Button to Sencha Navigation View

问题:

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

回答1:

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

回答2:

different way

var navigationView = Ext.create('Ext.NavigationView', {   useTitleForBackButtonText: false,   scrollable: false,   layout:   {     type: 'card',     animation: null   },   navigationBar:   {     items:     [       {         xtype: 'togglefield',         name: 'smsmode',         align: 'right',         value: 0,         disabled: true       },       {         text: '',         iconCls: 'delete',         align: 'right',         ui: 'back',         listeners:         {           tap: function()           {             navigator.app.exitApp();           }         }       }     ]   } }); 

文章来源: Add (right) Button to Sencha Navigation View