1. #1
    Ext JS Premium Member mikegiddens's Avatar
    Join Date
    Mar 2007
    Location
    Denver, Colorado
    Posts
    273
    Vote Rating
    1
    mikegiddens will become famous soon enough

      0  

    Default DialogBox body.dom.clientWidth /clientHeight flipfloped

    DialogBox body.dom.clientWidth /clientHeight flipfloped


    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.
    Mike Giddens
    =======================
    Opportunity is missed by most people because it is dressed in overalls and looks like work - Thomas Edison

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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.

  3. #3
    Ext JS Premium Member mikegiddens's Avatar
    Join Date
    Mar 2007
    Location
    Denver, Colorado
    Posts
    273
    Vote Rating
    1
    mikegiddens will become famous soon enough

      0  

    Default


    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

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

                        var 
    dialog = new Ext.BasicDialog('email-dlg', {
                                 
    autoCreatetrue
                                 
    title"Zoomify Viewer",
                                 
    width600
                                 
    height450,
                                 
    modaltrue,
                                 
    closabletrue
                            
    });
                        
    dialog.addKeyListener(27dialog.hidedialog);
                        
    dialog.addButton('Close'dialog.hidedialog);

                         
    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();
                }

            }
    }(); 
    Mike Giddens
    =======================
    Opportunity is missed by most people because it is dressed in overalls and looks like work - Thomas Edison

  4. #4
    Ext JS Premium Member mikegiddens's Avatar
    Join Date
    Mar 2007
    Location
    Denver, Colorado
    Posts
    273
    Vote Rating
    1
    mikegiddens will become famous soon enough

      0  

    Default


    <brian/jack bump>
    Mike Giddens
    =======================
    Opportunity is missed by most people because it is dressed in overalls and looks like work - Thomas Edison

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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:

    Code:
        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?

  6. #6
    Ext JS Premium Member mikegiddens's Avatar
    Join Date
    Mar 2007
    Location
    Denver, Colorado
    Posts
    273
    Vote Rating
    1
    mikegiddens will become famous soon enough

      0  

    Default


    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!!!!!
    Mike Giddens
    =======================
    Opportunity is missed by most people because it is dressed in overalls and looks like work - Thomas Edison

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    403
    Vote Rating
    0
    KimH is on a distinguished road

      0  

    Default


    Quote Originally Posted by mikegiddens View Post
    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?

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    New ones go on top. FireBug is backwards
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    403
    Vote Rating
    0
    KimH is on a distinguished road

      0  

    Default


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