Add own button with handler to navigation bar

[cassiopeia]

Hi,
I've already read a lot of posts, but couldn't find a complete example of adding a button to a navigation bar.
My code so far is this:

Ext.define('LeaveRequest.view.MyRequests', {
            extend : 'Ext.navigation.View',
            alias : 'widget.MyRequests',
            requires : [...],
            config : {
                title : 'My Requests',
                fullscreen : true,
                items : [...],

                navigationBar : {
                    items : [
                    {
                                id : 'addRequest',
                                xtype : 'button',
                                iconCls : 'add',
                                iconMask : true,
                                align : 'right',
                                scope:this,
                                handler:this.addRequestButton
                            }

                    ]
                }
            },

            addRequestButton : function() {
                 console.log('request button') ;
                this.fireEvent('addRequestButton', this);
            }

        });

The handler doesn't work. I've also tried with 'listeners' but the event gets never fired.

On another thread i saw this

Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add( {
              
              xtype : 'button', iconCls : 'add', iconMask : true, align :
              'right', scope:this, handler: this.addRequestButton });

when i place this in the initialize function, the back button of the navigationview won't work anymore.

can somebody help please?

[ingo.hefti]

First thing to note is that the function and the event you fire have the same name! This can't work.

Are you using MVC?

[cassiopeia]

Yes i'm using MVC. I use the same names in my other classes for the handler en the fire event and it still works.

The log in the function never shows in the console, so the problem is something else.

[ingo.hefti]

In MVC you have controllers. So why don't you listen for your button in the controller? The way you are doing this seems a bit complicated to me...

[cassiopeia]

It's better to fire an event to the controller than let the controller listen to a possible event.
This way, i can change whatever i want in the view and the controller will still work.
it's action based instead of polled.
i use this technique everywhere and it works perfectly. only not with a button within the navigation bar.

[haduki]

I do not know why you have to use navigation view.
Why not use toolbar/titlebar and card layout?

[cassiopeia]

i really need navigationview for the back buttons. these are created dynamically when you push new views.

[haduki]

ok.Your first method:

{
    id : 'addRequest',
    xtype : 'button',
    iconCls : 'add',
    iconMask : true,
    align : 'right',
    scope:this,
    handler:this.addRequestButton
}

the 'this' is window object ,because read context

// here is scope: window
Ext.define('',{/* here is a anonymous object create by window*/});

//more explain
var configObj={
   scope: this// this is window,you know?
}
console.info(configObj.scope);// will print window object.
Ext.define('',configObj);//do you understand?

Your second method:

when i place this in the initialize function, the back button of the navigationview won't work anymore.

Ext.define('LeaveRequest.view.MyRequests', {
    extend : 'Ext.navigation.View',
    xtype:'myrequests',
    config : {
        title : 'My Requests',
        fullscreen : true,
        items : [{html:'views',title:'the title'}]
        
        
    },
    initialize: function(){
        this.callParent();//i think you missed callparent.
        this.getNavigationBar().add({
                    id : 'addRequest',
                    xtype : 'button',
                    iconCls : 'add',
                    iconMask : true,
                    align : 'right',
                    scope:this,
                    handler:this.addRequestButton
                });
    },
    
    addRequestButton : function() {
        console.log('request button') ;
        this.push({
                            title:'second',
                            html:'other view'
       })
        this.fireEvent('addRequestButton', this);
    }
    
});

[cassiopeia]

Could you give an explanation please?
Not sure what you mean with that code.

[cassiopeia]

I just tried it with the callParent and it works, thank you very much!