PDA

View Full Version : Issue with syncSize() in safari



dbeatle123
22 Jul 2009, 6:05 PM
Hi all,

I apologize for a somewhat duplicate post here but I upgraded to Ext 3.0 while working on a solution in http://extjs.com/forum/showthread.php?t=75185 thread.

I am wondering about syncSize() in safari on a window element.

I hate to post something duplicate, but for completeness here is the code we're talking about here:



var win = new Ext.Window({ // config object
closable: true,
draggable: true,
layout: 'fit',
autoHide: false,
resizable: true,
title: "Click to drag",
autoScroll: true,
cls: 'popup',
x: showatX,
y: showatY,
listeners: {
'hide': function () {
extAreaClosed('output_image', mapArea.id);
},
'resize': function () {}
}
});

var bw = getBrowserWidth();
var bh = getBrowserHeight();
// current scroll location
var wx = (window.pageXOffset) ? window.pageXOffset: (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft: document.body.scrollLeft;

var wy = (window.pageYOffset) ? window.pageYOffset: (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop: document.body.scrollTop;

// additional workaround for OS X 10.3.x Safari versions
if (/Safari\/[123]/i.test(navigator.userAgent)) {
wx = 0;
wy = 0;
}

// win.showAt([showatX,showatY]);
win.show();
win.load({
url: fnum,
callback: function () {
var el = this.getEl();
var width = this.getEl().getComputedWidth();
var height = this.getEl().getComputedHeight();
if (height > (bh - (showatY - wy))) {
this.setSize({
width: undefined,
height: (bh - (showatY - wy) - 20)
});
}
// If I have clicked in the right half of the screen then I'll move the
// win to the left side of the click.
if (showatX > (bw - wx - (Ext.get('output_image').getWidth() / 2))) {
var width_diff = width;
var old_width = width;
while (width_diff != 0) {
old_width = el.getComputedWidth();
this.setPosition([el.getX() - width_diff, showatY]);
width_diff = el.getComputedWidth() - old_width;
}
this.syncSize();
}
},
scope: win
});


See the attached screenshot for a visual. Basically I am nudging a window to the left until the browser doesn't feel like enlarging it anymore. This works fine in Firefox 3.X but does not appear correctly in Safari 4.0.2.

Basically the window does not completely resize (only the shadow resizes). I added the this.syncSize() and now most of the window resizes but the title bar does not (see the attached image).

I hesitate to post this as a bug until I am sure that I haven't done something stupid. I am having trouble coming up with a simple demonstration of the issue (basically generate a window that is slightly off screen with contents loaded asynchronously. Then use the load callback to nudge the window into the screen.)

Thanks for any help.

dbeatle123
22 Jul 2009, 8:18 PM
I'm afraid I can't really explain why this doesn't work but I have a solution that seems to do the trick for now. Basically I can just set the header width to the size of the window's innerWidth and that seems to do the trick (if done on window resize).



var win = new Ext.Window({ // config object
id: 'popup_window',
closable: true,
draggable: true,
layout: 'fit',
resizable: true,
title: "Click to drag",
autoScroll: true,
listeners: {
'close': function () {
extAreaClosed('output_image', mapArea.id);
},
'resize': function () {
this.header.setWidth(this.getInnerWidth());
}
}
});


Someone more qualified than me may want to call this a bug but I am still not convinced it isn't something silly I'm doing.