Adding buttons to a view from its controller in ExtJS 4.1 - extjs

Question

I've the following code:
// wlpt.js
Ext.onReady(function() {
Ext.application({
name: 'WLPT',
appFolder: 'app',
controllers: ['MenuPanel'/*, 'Employees'*/],
launch: function() {
WLPT.application = this;
},
autoCreateViewport: true
});
});
//viewport.js
Ext.define('WLPT.view.Viewport', {
extend:'Ext.container.Viewport',
id:'viewport',
requires:[
'WLPT.view.Header',
'WLPT.view.MenuPanel'
],
layout: 'fit',
initComponent: function() {
this.items = {
layout: 'border',
items: [{
region: 'north',
xtype: 'headerview',
height: 80
},{
region: 'west',
id: 'westernPanel',
xtype: 'menupanelview',
width: 200,
collapsible: true
},{
xtype: 'panel',
title: 'Center Panel',
region: 'center'
}]
};
this.callParent();
}
});
// controller/MenuPanel.js
Ext.define('WLPT.controller.MenuPanel', {
extend: 'Ext.app.Controller',
currentYear: 0,
views:['MenuPanel'],
refs:
[{
selector: '.menupanel',
ref: 'menuPanel'
},{
selector: '#centerPanel',
ref: 'centerPanel'
}],
init: function() {
var d = new Date();
this.currentYear = d.getFullYear();
this.control({
'#btnEmployee': {
click: this.btnEmployeeClicked
}
});
this.callParent(arguments);
rolevalue = 10;
if (rolevalue == 10) {
// user is member of administration group
this.addAdminButtons();
}
},
addAdminButtons:function() {
console.log('addAdminButtons');
**this.getMenuPanelView().add({
xtype:'button',
scale: 'large',
text: 'Projects',
itemId: 'btnProject'
});**
}
});
// view/MenuPanel.js
Ext.define('WLPT.view.MenuPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.menupanelview',
bodyPadding: 2,
title: 'Menu Panel',
layout: {
type:'vbox',
align:'stretch'
},
items: [{
xtype:'label',
height: 10
}],
autoShow: true,
initComponent: function() {
this.callParent(arguments);
}
});
My problem is that the controller doesn't add the button on the view. I get the followig error:
Uncaught TypeError: Object function h(){return
this.constructor.apply(this,arguments)||null} has no method 'add'
What am I doing wrong?
Thanks for your help in advance

Answer 1

You need to add a reference to your menupanel. assign your menupanel an itemId: menupanel and in your controller you can reference it can reference it with: #menupanel. I noticed that you have .menupanel as the selector which I'm not sure is completely correct.
I also noticed that your are doing this.getMenuPanelView() which not correct as you don't have a reference to menuPanelView in your controller.
TIP:
Also you could use your browser's debugging tool(Google Chrome is my favorite) and add break points in your code to easily evaluate your code.