Issue with event handler in EXT JS 4 with card layout - extjs

Question

I am working on adding an event handler to a "card layout" Panel.
The problem I am having is I am getting the below error in the Google Chrome console.
Uncaught ReferenceError: navigate is not defined
This is my EXTJS code file:
Ext.define('COMP.app.DailyBulletin', {
extend: 'Ext.panel.Panel',
alias: 'widget.dailybulletin',
height: 300,
width: 200,
layout: 'card',
bodyStyle: 'padding:15px',
activeItem: 0, // index or id
bbar: ['->', {
id: 'card-prev',
text: '« Previous',
handler: function(btn){
navigate(btn.up("panel"), "prev");
},
disabled: true
},{
id: 'card-next',
text: 'Next »',
handler: function(btn){
navigate(btn.up("panel"), "next");
},
}],
items: [{
id: 'card-0',
html: 'page 0'
},{
id: 'card-1',
html: 'page 1'
}],
navigate: function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('card-prev').setDisabled(!layout.getPrev());
Ext.getCmp('card-next').setDisabled(!layout.getNext());
},
});
When I debug the JS in the Google Chrome Developer Tool I can see the issue is that the event handler can't access the navigate function, as it doesn't think it's there. If I just move the code from the navigate function into the event handler and change the layout and direction from expecting parameters to just getting them directly the navigation works fine. This tells me my issue is in how I am calling the navigate function and that I am doing something wrong there.
I'm new to EXT JS and any help is greatly appreciated, thanks!

Answer 1

Try something like this:
Ext.define('COMP.app.DailyBulletin', {
extend: 'Ext.panel.Panel',
alias: 'widget.dailybulletin',
height: 300,
width: 200,
layout: 'card',
bodyStyle: 'padding:15px',
activeItem: 0, // index or id
items: [{
id: 'card-0',
html: 'page 0'
}, {
id: 'card-1',
html: 'page 1'
}],
initComponent: function() {
Ext.apply(this, {
bbar: ['->', {
id: 'card-prev',
text: '« Previous',
scope: this,
handler: function(btn) {
this.navigate(btn.up("panel"), "prev");
},
disabled: true
}, {
id: 'card-next',
text: 'Next »',
handler: function(btn) {
scope: this,
this.navigate(btn.up("panel"), "next");
},
}]
});
this.callParent();
},
navigate: function(panel, direction) {
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('card-prev').setDisabled(!layout.getPrev());
Ext.getCmp('card-next').setDisabled(!layout.getNext());
},
});