model view controller - newCard.fireEvent is not a function for ExtJS 5.1.1 -
i have viewport , has 2 content: menu , main content. during click event menu items, error: uncaught typeerror: newcard.fireevent not function
what missing navigate function? here 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; } }); and of course controller:
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(); } }); } } });
the error caused in line:
this.getcontentpanel().layout.setactiveitem(id + 'panel'); because underlying issue ids of menu items , cards have match.
you have menu items
home foliolist calendar but ids have in card layout are
homepanel foliopanel calendarpanel so when menu item id foliolist clicked , subsequently setactiveitem("foliolistpanel") executed, no item id foliolistpanel exists, obscure error thrown in extjs.
while changing id should fix problem @ hand, want amend controller check whether item exists before navigating, because navigation can executed through user-changed anchor, , don't want user break app way.
Comments
Post a Comment