2017-08-15 10 views
0

私はビューポートを持っており、メニューとメインコンテンツという2つのコンテンツを持っています。メニューアイテムのクリックイベント中にこのエラーが発生します: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 folioListとメニュー項目がクリックされると、その後setActiveItem("folioListPanel")が実行されたとき、あなたのカードのレイアウトを持っているIDがそう

homePanel 
folioPanel 
calendarPanel 

ですが、 idがfolioListPanelのアイテムが存在しない場合、その曖昧なエラーはExtJSでスローされます。

idを変更すると問題が解決するはずですが、ユーザーが変更したアンカーでナビゲーションを実行できるため、ナビゲートする前に項目が実際に存在するかどうかを確認するためにコントローラーを修正することも間違いありません。あなたのユーザーはあなたのアプリをそのように壊すことは望ましくありません。

関連する問題