DialogBox body.dom.clientWidth /clientHeight flipfloped

[mikegiddens]

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]

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]

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. 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]

<brian/jack bump>

[brian.moeskau]

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]

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.

I had a obvious typo of width/height in my flash params. 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]

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, 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]

New ones go on top. FireBug is backwards

[KimH]

Okay I admit... I should have tried it at the time of posting I just tried it again and it works now