Model view controller newCard.fireEvent不是ExtJS 5.1.1的函数_Model View Controller_Extjs_Controller_Navigateurl

Model view controller newCard.fireEvent不是ExtJS 5.1.1的函数

model-view-controller extjs

Model view controller newCard.fireEvent不是ExtJS 5.1.1的函数,model-view-controller,extjs,controller,navigateurl,Model View Controller,Extjs,Controller,Navigateurl,我有一个视口，它有两个内容：菜单和主内容。在菜单项的单击事件期间，我收到以下错误：uncaughttypeerror:newCard.firevent不是函数导航功能缺少什么？以下是视图和控制器主视图： Ext.define('CalTable.view.MainView', { extend: 'Ext.container.Viewport', alias: 'widget.mainview', requires: [ 'Ext.menu.Menu

我有一个视口，它有两个内容：菜单和主内容。在菜单项的单击事件期间，我收到以下错误：

uncaughttypeerror:newCard.firevent不是函数

导航

功能缺少什么？以下是

视图

和

控制器

主视图：

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

该错误是由此行引起的：

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

因为潜在的问题是菜单项和卡片的ID必须匹配

你有菜单项吗

home
folioList
calendar

但是你卡布局中的ID是

homePanel
folioPanel
calendarPanel

因此，当单击id为

folioList

的菜单项并随后执行

setActiveItem（“folioListPanel”）

时，但不存在id为

folioListPanel

的项，则会在ExtJS中抛出该模糊错误

虽然更改id应该可以解决当前的问题，但您肯定也希望在导航之前修改控制器以检查项目是否确实存在，因为导航也可以通过用户更改的锚执行，您不希望您的用户以这种方式破坏您的应用程序。

错误是由以下几行引起的：

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