PDA

View Full Version : DialogBox body.dom.clientWidth /clientHeight flipfloped



mikegiddens
11 Apr 2007, 7:12 PM
Jack,

After much testing I have a problem with BasicDialog.

dialog.body.dom.clientWidth and clientHeight work fine in FF but when I do the same thing in IE7 the width and height are swapped. I am not sure where they are calcualated otherwise I would track it down for ya but this really does seem like a bug. Please let me know what you find out so I can get it changed.

brian.moeskau
11 Apr 2007, 7:23 PM
Hey Mike, can you provide some code or more details? The thing is that once you get down to Element.dom, you're dealing with a plain ol' DOM node. dom.clientHeight and clientWidth are the regular DOM methods, not Ext-specific methods, so they aren't calculating anything. There may be somewhere in Ext where your returned values are actually getting switched somehow, but I need more to go off of to try and track it down.

mikegiddens
11 Apr 2007, 7:31 PM
Here is the whole dlg box. Note the console.logs in FF they are correct. In IE7 they are backwards. Current Version: Ext1.0 B2 it was the same before too.

Thanks for any help. I know the dom is pretty core so any insite would help.

Ignore teh bad coding style. 8-| Still working on my JS scoping lessons. haha


var DlgZoomify = function(params){
var dialog;
var params;
return {
init : function(filename){

var dialog = new Ext.BasicDialog('email-dlg', {
autoCreate: true,
title: "Zoomify Viewer",
width: 600,
height: 450,
modal: true,
closable: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

DlgZoomify.tpl = new Ext.Template(
'<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="{height}" HEIGHT="{width}">' +
'<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=http://www.herbarium.lsu.edu/images/archive/zoom/{file}/">' +
'<PARAM NAME="MENU" VALUE="FALSE">' +
'<PARAM NAME="SRC" VALUE="zoomifyViewer.swf">' +
'<EMBED FlashVars="zoomifyImagePath=http://www.herbarium.lsu.edu/images/archive/zoom/{file}/" SRC="zoomifyViewer.swf\" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" WIDTH="{width}" HEIGHT="{height}"></EMBED>' +
'</OBJECT>'
);

dialog.body.update('<div id="zoomify"></div>');

dialog.on('resize', function () {
console.log(dialog.body.dom.clientWidth);
console.log(dialog.body.dom.clientHeight);
DlgZoomify.tpl.overwrite('zoomify', {file:DlgZoomify.params.filename,width:dialog.body.dom.clientWidth,height:dialog.body.dom.clientHeight});
});
DlgZoomify.dialog = dialog;
},

show: function(btn) {
DlgZoomify.params = btn.params;
if (!DlgZoomify.dialog)
DlgZoomify.init(DlgZoomify.params.filename);

DlgZoomify.tpl.overwrite('zoomify', {file:DlgZoomify.params.filename,width:DlgZoomify.dialog.body.dom.clientWidth,height:DlgZoomify.dialog.body.dom.clientHeight});

DlgZoomify.dialog.show();
}

}
}();

mikegiddens
12 Apr 2007, 6:51 AM
<brian/jack bump> 8-|

brian.moeskau
12 Apr 2007, 7:57 AM
Mike, I didn't test your exact code with the flash object, but I did verify this cut-down version using the Hello World example:


var dialog = new Ext.BasicDialog('hello-dlg', {
autoCreate: true,
title: "Zoomify Viewer",
width: 600,
height: 450,
modal: true,
closable: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

dialog.on('resize', function () {
console.log('w '+dialog.body.dom.clientWidth);
console.log('h '+dialog.body.dom.clientHeight);
});

I tested in FF 2, IE 6 & 7, and they all worked identically for me. Can you test this code and see whether or not it reports different results than your original code?

mikegiddens
12 Apr 2007, 8:57 AM
Ok now I feel like the biggest and apologize for the investigation into nothing.

It seems that
A) I was not putting a label like you where and console.log I use Firebug to read the values and in IE I use Jacks debugger to view the log. What I didn't realize since I was not putting a label is that Jacks debugger does not put the values in the same order. That was why I was assuming things where getting flipped. :">

B) I had a obvious typo of width/height in my flash params. 8-| It was in 2 places and overlooked one which apparently only was used in IE and not FF.

Again I am sorry Brian for any head scratching that I may have caused.

Problem Solved. YEAH!!!!!

KimH
15 Apr 2007, 11:46 AM
Ok now I feel like the biggest and apologize for the investigation into nothing.

It seems that
A) I was not putting a label like you where and console.log I use Firebug to read the values and in IE I use Jacks debugger to view the log. What I didn't realize since I was not putting a label is that Jacks debugger does not put the values in the same order.

I reported this some time back (http://www.extjs.com/forum/showthread.php?p=14019#post14019), but I can see that Jack did not respond to that and I haven't tried it after, so it might have been fixed? Jack?

jack.slocum
15 Apr 2007, 10:00 PM
New ones go on top. FireBug is backwards :D

KimH
15 Apr 2007, 11:29 PM
Okay I admit... I should have tried it at the time of posting :D I just tried it again and it works now B)