Click event not getting registered from within a controller in ExtJS 4 MVC - extjs4

Question

My button click event subscribed in the controller is getting fired. Here is the code.
WebAppMasterController.js
Ext.define('P.e.w.controller.WebAppMasterController', {
extend: 'P.e.w.controller.IController',
views: [
'WebAppMasterView'
],
refs: [
{
ref: 'webAppView',
selector: 'WebAppMasterView'
}
],
init: function () {
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
}, {
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
},
viewafterrender: function (panel) {
alert();
}
});
IController extends "Ext.app.Controller".
In the above code, the "afterrender" event is getting triggered, but the button click event is not getting triggered.
The view: WebAppMasterView.js
Ext.define('P.e.w.view.WebAppMasterView', {
extend: 'P.w.l.Header',
alias: 'widget.WebAppMasterView',
constructor: function (config) {
var me = this;
me.centerregion = me.createCenterRegion(config);
Ext.applyIf(config, {
favoriteBar: true,
items: [me.centerregion],
menuWidth: 0
});
this.callParent([config]);
},
createBody: function () {
var me = this;
if (!me.controlPanel) {
me.controlPanel = Ext.create('Ext.Panel', {
layout: 'fit'
});
}
return me.controlPanel;
},
createCenterRegion: function (config) {
var me = this,
centerPanel = Ext.create('Ext.Panel', {
region: 'center',
layout: 'fit',
tbar: {
xtype: 'WorkRequestMenuBar',
id: 'workrequestmenubar'
},
defaults: {
border: false
},
items: [me.createBody()]
});
return centerPanel;
}
});
WorkRequestMenuBar.js
Ext.define('P.e.w.view.WorkRequestMenuBar', {
extend: 'Ext.Toolbar', alias: 'widget.WorkRequestMenuBar',
constructor: function (config) {
config = config || {};
Ext.apply(config, {
defaults: {
scale: 'large',
cls: 'x-btn-text-icon',
iconAlign: 'top'
},
items: [
{
text: 'NEW_WORK_REQUEST',
iconCls: 'menubar-createWorkRequest',
action: 'save'
},
{
text: 'OVERVIEW',
iconCls: 'menubar-overview'
}, '->', {
iconCls: 'icon-biggerHelp',
width: 80,
text: 'HELP'
}
]
});
this.callParent([config]);
}
});

Answer 1

You have several issues.
1st. there is a syntax error in your controller
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
},
{
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
//missing --> );
},
2nd. The toolbar config method should be initComponent method instead.