Question

我有以下代码：

// 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);
 }     
});

我的问题是控制器没有在视图上添加按钮。我收到了以下错误：

未捕获的TypeError：对象函数h（）{return this.constructor.apply（this，arguments）|| null}没有方法'add'

我做错了什么？

感谢您的提前帮助

Answer 1

您需要添加对菜单面板的引用。为您的菜单面板分配一个itemId：menupanel，您可以在控制器中引用它，可以用#menupanel引用它。我注意到你有.menupanel作为选择器，我不确定它是完全正确的。

我还注意到您正在执行的this.getMenuPanelView()因为您的控制器中没有menuPanelView的引用而无法更正。

提示您也可以使用浏览器的调试工具（谷歌浏览器是我最喜欢的）并在代码中添加断点以轻松评估您的代码。

在ExtJS 4.1中从控制器向视图添加按钮

1 个答案: