PDA

View Full Version : [FIXED] [4.2.0] Clicking on a Menuitem does not redirect to the specified href



LukeSencha
3 Apr 2013, 12:04 AM
In 4.2, clicking on a menuitem does not redirect to the specified href depending on where the user clicked on the item:

42867

Clicking inside of the outlined areas does redirect, but clicking on areas further away from the text doesn´t. In 4.1, the redirect was executed no matter where the user clicked.

I had a look at the source code for versions 4.1 and 4.2 and noticed a change in the renderTpl property, but i wasn´t able to point out which change caused this behavior.

mitchellsimoens
3 Apr 2013, 5:17 AM
Can I get a test case to reproduce and debug?

LukeSencha
3 Apr 2013, 9:56 PM
Hi!

Thanks for your response, I hope the following snippet is enough to reproduce the bug.


Ext.define('Test.view.MainContentPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainContentPanel',


id: 'mainContentPanel',
itemId: 'mainContentPanel',
layout: {
align: 'stretch',
type: 'hbox'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {

items: [
{
xtype: 'panel',
flex: 1,
cls: 'mainNavPanel',
itemId: 'navPanel',
maxWidth: 250,
minWidth: 200,
items: [
{
xtype: 'container',
itemId: 'menuContainer',
layout: {
type: 'fit'
},
items: [
{
xtype: 'menu',
floating: false,
itemId: 'menuItems',
width: 120,
collapsible: true,
title: 'Items',
items: [
{
xtype: 'menuitem',
itemId: 'menuitem1',
href: '#href2',
text: 'Menuitem1'
},
{
xtype: 'menuitem',
itemId: 'menuitem2',
href: '#href2',
text: 'Menuitem2'
},
]
}
]
}
]
}
]
});


me.callParent(arguments);
}
});

mitchellsimoens
4 Apr 2013, 5:27 AM
It's working for me, both menu items putting the hash #href2 on the url as they are configured.

LukeSencha
4 Apr 2013, 10:27 PM
Hi,

maybe we had a misunderstanding here, so i´ll try to explain the problem a bit more:

I updated the code snippet to this:


Ext.define('Test.view.MainContentPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mainContentPanel',




id: 'mainContentPanel',
itemId: 'mainContentPanel',
layout: {
align: 'stretch',
type: 'hbox'
},




initComponent: function() {
var me = this;




Ext.applyIf(me, {

items: [
{
xtype: 'panel',
flex: 1,
cls: 'mainNavPanel',
itemId: 'navPanel',
maxWidth: 500,
minWidth: 500,
items: [
{
xtype: 'container',
itemId: 'menuContainer',
layout: {
type: 'fit'
},
items: [
{
xtype: 'menu',
floating: false,
itemId: 'menuItems',
width: 120,
collapsible: true,
title: 'Items',
items: [
{
xtype: 'menuitem',
itemId: 'menuitem1',
href: '#href1',
text: 'Menuitem1'
},
{
xtype: 'menuitem',
itemId: 'menuitem2',
href: '#href2',
text: 'Menuitem2'
},
]
}
]
}
]
}
]
});




me.callParent(arguments);
}
});

I changed the min and max width of the surrounding panel to 500, so the menuitems are a bit larger.

Inspecting the menuitem in chrome, the div for the menuitem is spanning the whole width of the surrounding panel:

4292942930

Clicking on the menuitem on the far right doesn´t redirect to the specified href, because the underlying anchor is much smaller than the div:

42927
42928

This is new in 4.2, as the following screenshot of the same menuitem in 4.1 demonstrates:

42931

I hope this makes it all a bit more clear and you can understand my problem with this new behavior.
Basically, what I want is the anchor to be as large as the containing div, so the user can click anywhere on the menuitem to get redirected.

Thank you for your help and best wishes,
Luke

evant
4 Apr 2013, 10:39 PM
We'll look into it, thanks for posting.