2017-08-15 26 views
0

我有一个视口,它有两个内容:菜单和主要内容。在菜单项的单击事件期间,出现此错误:Uncaught TypeError: newCard.fireEvent is not a functionnewCard.fireEvent不是ExtJS 5.1.1的功能

我缺少什么navigate函数?这里是ViewController;

的MainView:

Ext.define('CalTable.view.MainView', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.mainview', 

    requires: [ 
     'Ext.menu.Menu', 
     'Ext.menu.Item', 
     'Ext.form.Label' 
    ], 

    itemId: 'mainView', 
    layout: 'border', 
    defaultListenerScope: true, 

    items: [ 
     { 
      xtype: 'panel', 
      region: 'west', 
      split: true, 
      itemId: 'menuPanel', 
      width: 150, 
      title: 'Menu', 
      items: [ 
       { 
        xtype: 'menu', 
        floating: false, 
        itemId: 'menu', 
        items: [ 
         { 
          xtype: 'menuitem', 
          itemId: 'home', 
          text: 'Home', 
          focusable: true 
         }, { 
          xtype: 'menuitem', 
          itemId: 'folioList', 
          text: 'Folio List', 
          focusable: true 
         }, { 
          xtype: 'menuitem', 
          itemId: 'calendar', 
          text: 'Calendar', 
          focusable: true 
         } 
        ], 
        listeners: {click: 'onMenuClick'} 
       } 
      ] 
     }, { 
      xtype: 'panel', 
      region: 'center', 
      itemId: 'contentPanel', 
      layout: 'card', 
      scope: this, 
      items: [ 
       { 
        xtype: 'panel', 
        itemId: 'homePanel', 
        title: 'Home', 
        layout: { 
         type: 'vbox', 
         align: 'center', 
         pack: 'center' 
        }, 
        items: [ 
         { 
          xtype: 'label', 
          text: 'Home View' 
         } 
        ] 
       }, { 
        xtype: 'panel', 
        itemId: 'folioPanel', 
        title: 'Folio List', 
        layout: { 
         type: 'vbox', 
         align: 'center', 
         pack: 'center' 
        }, 
        items: [ 
         { 
          xtype: 'label', 
          text: 'Folio List View' 
         } 
        ] 
       }, { 
        xtype: 'panel', 
        itemID: 'calendarPanel', 
        title: 'Calendar', 
        layout: { 
         type: 'vbox', 
         align: 'center', 
         pack: 'center' 
        }, 
        items: [ 
         { 
          xtype: 'label', 
          text: 'Calendar View' 
         } 
        ] 
       } 
      ] 
     } 
    ], 

    onMenuClick: function(menu, item, e, eOpts) { 
     location.hash = item.itemId; 
    } 
}); 

当然控制器和:

Ext.define('CalTable.controller.TheController', { 
    extend: 'Ext.app.Controller', 
    requires: ['Ext.util.History'], 

    refs: { 
     contentPanel: '#contentPanel', 
     menu: '#menu', 
     menuPanel: '#menuPanel' 
    }, 

    onLaunch: function() { 
     Ext.History.init(); 
     Ext.History.on('change', this.navigate, this); 
     this.navigate(window.location.hash); 
    }, 

    navigate: function (id) { 
     if (id) { 
      if (id[0] == '#') id = id.slice(1); 
      this.getContentPanel().layout.setActiveItem(id + 'Panel'); 
      this.getMenu().items.each(function (item) { 
       if (item.href == '#' + id) { 
        item.disable(); 
        window.document.title = item.text; 
       } 
       else { 
        item.enable(); 
       } 
      }); 
     } 
    } 
}); 

回答

1

的错误是在这一行造成的:

this.getContentPanel().layout.setActiveItem(id + 'Panel'); 

,因为潜在的问题是对的IDS菜单项和卡必须匹配。

你有菜单项

home 
folioList 
calendar 

,但你在你的卡片布局有ID是

homePanel 
folioPanel 
calendarPanel 

所以当id为folioList菜单项被点击,随后setActiveItem("folioListPanel")被执行,但没有id为folioListPanel的项目存在,在ExtJS中引发了模糊的错误。

虽然更改id应该可以解决手头上的问题,但您肯定也想要做的是修改控制器以在导航前检查该项是否真的存在,因为导航也可以通过用户更改的锚来执行,而且你不希望你的用户以这种方式破坏你的应用程序。