PDA

View Full Version : Menu item bug?



hacx1989
18 Mar 2014, 8:24 AM
hi,

I'm using the template of accordion layout in SenchaArchitecture3, but I embedded a menu to the west panel and changed the center panel to a tab panel. When the menu items are clicked, I want them fire an event which add a tab to the center tab panel, and the problem comes on. When a tab is focus, then the click event doesn't work!


Ext.define('CQPlus.app.Home', { extend: 'Ext.container.Viewport', requires: [ 'Ext.menu.Menu', 'Ext.menu.Item', 'Ext.tab.Panel', 'Ext.tab.Tab' ],
layout: { type: 'border', padding: '0 5 5 5' // pad the layout from the window edges },
initComponent: function () {
function onItemClick(item, e) { console.log('clicked'); var tp = Ext.getCmp('tabPanel'); var tab = tp.getComponent(item.id); if (!tab) { tab = Ext.create('Ext.Panel', { id: item.id, title: item.text, tabConfig: { height: 35 }, closable: true, html: item.text }); tp.add(tab); } //tp.setActiveTab(tab); }
//tabPanel var tabPanel = Ext.create('Ext.tab.Panel', { id: 'tabPanel', xtype: 'tabpanel', region: 'center', focusOnToFront: false, activeTab: 0, items: [ { id: '1', xtype: 'panel', title: 'console', tabConfig: { height: 35 }, closable: false } ] });
//menuPanel var menuPanel = Ext.create('Ext.Panel', { id: 'menuPanel', xtype: 'panel', region: 'west', width: 250, layout: 'accordion', collapsed: false, collapsible: false, title: 'menus', items: [ { xtype: 'menu', floating: false, width: 120, shadow: 'drop', allowOtherMenus: true, title: 'Management', items: [ { id: 'BasicData', xtype: 'menuitem', text: 'item1', hideOnClick: false, handler: onItemClick } ] }, { xtype: 'menu', floating: false, width: 120, title: 'M2', shadow: 'drop', allowOtherMenus: true, items: [ { xtype: 'menuitem', text: 'item2' } ] } ] }); var me = this; Ext.applyIf(me, { items: [ { xtype: 'panel', region: 'north', height: 70, layout: 'border', header: false, items: [ { id: 'app-header', xtype: 'box', region: 'west', width: 300, header: false, layout: 'fit', html: 'logo' }, { xtype: 'toolbar', region: 'center', //layout: 'fit', header: false, border: false, items: [ '->', '-', { xtype: 'button', text: 'logout', icon: '/Images/Logout_32.ico', iconAlign: "top", //glyph: 100, scale: 'large', width: 60, height: 60, } ] } ] }, { xtype: 'panel', region: 'west', width: 250, layout: 'border', title: '', collapsed: false, collapsible: true, items: [ { xtype: 'panel', region: 'north', height: 67, header: false, html: '' }, menuPanel ] }, tabPanel ] }); me.callParent(arguments); }
});

Is this a bug? Could anyone help me?

Gary Schlosberg
18 Mar 2014, 9:23 AM
Thanks for the report. Can you please post a runnable test case which reproduces the issue you are describing?
https://fiddle.sencha.com/#home

hacx1989
18 Mar 2014, 5:19 PM
Ext.define('CQPlus.app.Home', { extend: 'Ext.container.Viewport', requires: [ 'Ext.menu.Menu', 'Ext.menu.Item', 'Ext.tab.Panel', 'Ext.tab.Tab' ], layout: { type: 'border', padding: '0 5 5 5' }, initComponent: function () { function onItemClick(item, e) { Ext.Msg.alert('msg', 'clicked'); var tp = Ext.getCmp('tabPanel'); var tab = tp.getComponent(item.id); if (!tab) { tab = Ext.create('Ext.Panel', { id: item.id, title: item.text, tabConfig: { height: 35 }, closable: true, html: item.text }); tp.add(tab); } tp.setActiveTab(tab); } //tabPanel var tabPanel = Ext.create('Ext.tab.Panel', { id: 'tabPanel', xtype: 'tabpanel', region: 'center', focusOnToFront: false, activeTab: 0, items: [ { id: '1', xtype: 'panel', title: 'console', tabConfig: { height: 35 }, closable: false } ] }); //menuPanel var menuPanel = Ext.create('Ext.Panel', { id: 'menuPanel', xtype: 'panel', region: 'west', width: 250, layout: 'accordion', collapsed: false, collapsible: false, title: 'menus', items: [ { xtype: 'menu', floating: false, width: 120, shadow: 'drop', allowOtherMenus: true, title: 'Management', items: [ { id: 'BasicData', xtype: 'menuitem', text: 'item1', hideOnClick: false, handler: onItemClick } ] }, { xtype: 'menu', floating: false, width: 120, title: 'M2', shadow: 'drop', allowOtherMenus: true, items: [ { xtype: 'menuitem', text: 'item2' } ] } ] }); var me = this; Ext.applyIf(me, { items: [ { xtype: 'panel', region: 'north', height: 70, layout: 'border', header: false, items: [ { id: 'app-header', xtype: 'box', region: 'west', width: 300, header: false, layout: 'fit', html: 'logo' }, { xtype: 'toolbar', region: 'center', header: false, border: false, items: [ '->', '-', { xtype: 'button', text: 'logout', icon: '/Images/Logout_32.ico', iconAlign: "top", scale: 'large', width: 60, height: 60, } ] } ] }, { xtype: 'panel', region: 'west', width: 250, layout: 'border', title: '', collapsed: false, collapsible: true, items: [ { xtype: 'panel', region: 'north', height: 67, header: false, html: '' }, menuPanel ] }, tabPanel ] }); me.callParent(arguments); }});Ext.application({ name : 'Fiddle', launch : function() { Ext.create('CQPlus.app.Home'); }});

hacx1989
18 Mar 2014, 8:53 PM
I found my tab id was the same as my menu item id, and then the event didn't work correctly. Sorry for that.

Gary Schlosberg
19 Mar 2014, 4:51 PM
Glad to hear you found the issue, and thanks for taking the time to post a follow-up.