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.