私はビューポートを持っており、メニューとメインコンテンツという2つのコンテンツを持っています。メニューアイテムのクリックイベント中にこのエラーが発生します:Uncaught TypeError: newCard.fireEvent is not a function
newCard.fireEventはExtJS 5.1.1の機能ではありません
navigate
の機能は何ですか?ここには、View
とController
があります。
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();
}
});
}
}
});