PDA

View Full Version : Only top of toolbar elements are clickable (Ext.menu.Menu inserted in Ext.viewport)



ImShogun
8 Aug 2009, 12:48 PM
Hello,

I'm encountering a strange behaviour with my menu: only the few pixels on top are clickable. if I aim the center (the text for example), I can't click.
Except in Internet Explorer whee it is ok.

It's even more complicated: If everything is fine, when we put the mouse over, the button is highlighted, then when we click, there is a pressure effect and the action is triggered.

But for my menu...:
IE: All is fine (but I hardly see the button pressed effect)
Firefox/Opera/Chrome:

MouseOver:
center :
nothing happens
top :
button is highlighted
Click:
center:
button is pressed (visual)
action is not triggered
top:
button is not pressed (no visual effect)
action triggered My guess is the Mouse Area for the Pressure effect is ok, but the Mouse area for Highlight and click action are both moved up.

I can't figure out why. I Didn't change anything in CSS.

Any idea?

Here is the viewport code. No need to add the menu objects, the bug exists without it:



var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.Toolbar({
//menu: menu,
region: 'toolbar',
align:'right',
width:'100%',
items: [
' ',
{xtype: 'tbtext', text: '<b>CMS3</b>'
},
' ',' ',
{xtype: 'tbtext', text: 'Connecté: '+CurrentUser
},
' ',' ',
{
text: 'Affichage',
iconCls: 'bmenu', // <-- icon
menu: menu1 // assign menu by instance]
},
{
text: 'Avancé',
iconCls: 'bmenu', // <-- icon
menu: {
items: [{
text: 'Recharger les principaux scripts'
}]
}
},
{xtype: 'tbfill'},
{
text: 'Aide',
iconCls: 'bmenu', // <-- icon
menu: {
items: [
{
text:'A propos'
}
]
}
}
]
}),
{ // raw
xtype:'container',
title:'ok',
region:'north',
id:'north',
el: 'north',
height:55,
margins:'5 5 5 5'

},{
layout:'accordion',
region:'west',
id:'west-panel',
title:'Menu',
split:true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
draggable:false,

layoutConfig:{
animate:true
},
defaults:{
collapsed: true
},
items: accordeon
},
myTabPanel
]
});
Thanks for your help!

ImShogun
8 Aug 2009, 12:51 PM
I added some screenshot, would've been better with the mouse cursor tough, but can't get it.

ImShogun
8 Aug 2009, 5:28 PM
I don't get it.

It is working now, 100% clickable, given I inverted the first and second items of my viewport... (this does not change the aspect at all, menu still display on top).

Does it make sense to anybody to ask first for the empty zone under the menu, then for the menu above it?



//INTERFACE PRINCIPALE:

var viewport = new Ext.Viewport({
layout:'border',
items:[

{ // raw
xtype:'container',
title:'ok',
region:'north',
id:'north',
el: 'north',
height:55,
margins:'5 5 5 5'

},
new Ext.Toolbar({
//menu: menu,
region: 'toolbar',
align:'right',
width:'100%',
items: [
' ',
{xtype: 'tbtext', text: '<b>CMS3</b>'
},
' ',' ',
{xtype: 'tbtext', text: 'Connecté: '+CurrentUser
},
' ',' ',
{
text: 'Affichage',
iconCls: 'bmenu', // <-- icon
menu: menu1 // assign menu by instance]
},
{
text: 'Avancé',
iconCls: 'bmenu', // <-- icon
menu: {
items: [{
text: 'Recharger les principaux scripts'
}]
}
},
{xtype: 'tbfill'},
{
text: 'Aide',
iconCls: 'bmenu', // <-- icon
menu: {
items: [
{
text:'A propos'
}
]
}
}
]
}),
{
layout:'accordion',
region:'west',
id:'west-panel',
title:'Menu',
split:true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
draggable:false,

layoutConfig:{
animate:true
},
defaults:{
collapsed: true
},
items: accordeon
},
myTabPanel
]
});
//Ext.get("hideit").on('click', function() {
// var w = Ext.getCmp('west-panel');
// w.collapsed ? w.expand() : w.collapse();
//});
};

taronja
26 Mar 2010, 2:35 AM
also in FF or Chrome, but the behaviour is different. In this case, the button highlights when the mouse is over the text and does nothing when the mouse is over the icon.
How did you solve it?