PDA

View Full Version : Bug with splitbar and nested panel containing iframe



mxracer
3 Apr 2007, 10:34 AM
I have set up this test page you can look at: http://www.qwikioffice.com/qwikimail/iframed.php

Notice how in Firefox (I have FF 2) that while you can drag and resize the west panel's splitbar over the iframe, you cannot drag and resize the nested north/south splitbar over it.

I am using useShim: true and it works fine in IE 7 and Opera 9 for me.
I am just experiencing problems in FireFox.

If you take a look at my test page, qwikimail_ui_iframed.js is the file creating the layout.

JeffHowden
4 Apr 2007, 4:42 PM
FWIW, I've confirmed this buggy behavior, but am not yet sure what exactly is causing it (though it seems to be tied to something specific in NestedLayoutPanel).

jack.slocum
4 Apr 2007, 4:50 PM
Dragging over iframes is always a problem. There is a workaround that is on the plate but it takes a complete rewrite of SplitBar to not use drag drop. So, it has been delayed for a future release.

mxracer
4 Apr 2007, 6:14 PM
Thanks for the reply guys:)

How far off is this future release? Just Curious.

si-rus
5 Dec 2007, 1:51 PM
My solving of problem



.shim-iframe{
width:100%;
height:100%;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
background:#f00;
}





var layout = new Ext.BorderLayout(layoutId, {
north: {
split:false,
initialSize: 25,
titlebar: false
},
center: {
titlebar: false,
fitToFrame: true,
autoScroll:false
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel(northPanelId, {title:'North'}));

var workPanel = new Ext.BorderLayout(workPanelId, {
south: {
split:true,
autoScroll:true,
collapsible:true,
collapsed:true,
titlebar: true,
animate: true
},
center: {
autoScroll:true,
fitToFrame: true,
titlebar:false
}
});

workPanel.beginUpdate();
var centerPanel = new Ext.ContentPanel(centerPanelId, {title:'Center Panel'});
workPanel.add('center', centerPanel);
var demoPanel = new Ext.ContentPanel(demoPanelId, {autoCreate:true, title:'Demo'});
workPanel.add('south', demoPanel);
workPanel.endUpdate();
layout.add('center', new Ext.NestedLayoutPanel(workPanel, 'Center Panel'));
layout.endUpdate();

var split = workPanel.getRegion('south').split;
split.on('beforeresize',function(){
var div = document.createElement('div');
div.className = 'shim-iframe';
demoPanel.el.dom.appendChild(div);
});
split.on('moved',function(){
var dom = demoPanel.el.dom;
if (dom.lastChild.className == 'shim-iframe') dom.removeChild(dom.lastChild);
});


...
demoPanel.setContent('<iframe frameborder="0" src="http://www.blabla.com" width="100%" height="100%"></iframe>');
...



it works perfectly