newCard.fireEvent 不是 ExtJS 5.1.1 的函数

Question

我有一个视口，它有两个内容：菜单和主要内容。在菜单项的点击事件期间，出现此错误：Uncaught TypeError: newCard.fireEvent is not a function

navigate 函数我缺少什么？这里是 View 和 Controller;

主视图：

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

Answer 1

错误是在这一行引起的：

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

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

您有菜单项

home
folioList
calendar

但是您在卡片布局中的 ID 是

homePanel
folioPanel
calendarPanel

因此，当单击 ID 为 folioList 的菜单项并随后执行 setActiveItem("folioListPanel")，但不存在 ID 为 folioListPanel 的菜单项时，ExtJS 将抛出该模糊错误。

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

newCard.fireEvent 不是 ExtJS 5.1.1 的函数

newCard.fireEvent is not a function for ExtJS 5.1.1

model-view-controller

controller

extjs

navigateurl