PDA

View Full Version : [OPEN-EXTJSIV-410] Toolbars with viewport in Opera



lucia_mgv
28 Mar 2011, 4:32 AM
Hi,

I have an example of a toolbar inside an Ext Panel which is inside a Viewport. In all the explorers the buttons of the toolbar are working fine, but in Opera, if the viewport's first child is overflowed, when clicking one of the toolbars button, the viewport scroll an the handler of the button does nothing.

This is the code I am implementing:



Ext.onReady(function(){
Ext.QuickTips.init();

var MenuActions$Menu = Ext.create('Ext.menu.Menu', {
id: 'MenuActions$Menu',
items: [
{
id:'PPRR_PPRR_00000100Action1',
text:'Duplicate'
},
{
id:'OptionAssign',
text:'Assign...'
}
]
});

var viewport = new Ext.container.Viewport({
layout:'fit',
items:[
new Ext.container.Container({
autoScroll:true,
layout:'anchor',
style:'border-color:blue;background-color:gray;',
items:[
new Ext.container.Container({
height:300
}),
new Ext.panel.Panel({
height:500,
dockedItems: [{
xtype: 'toolbar',
dock:'top',
items: [
{
id:'MenuActions',
text:'Actions',
menu:MenuActions$Menu
},
{
id:'Reports',
text:'Reports'
},{
id:'New',
text:'New'
}]
}]
}),
new Ext.container.Container({
height:300
})
]
})
]
});

});


This code is working fine in IE, Firefox and Chrome.

Thank you!

Lucía

lucia_mgv
29 Mar 2011, 11:47 PM
Anybody has noticed the same behaviour? maybe I did something wrong in the code...

lucia_mgv
5 Apr 2011, 2:45 AM
Changing the height of the viewport in the css style fixes the problem:



.x-viewport, .x-viewport body {
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: auto;
}