1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default [2.x/3.x] getHeight and getWidth on Ext.getBody

    [2.x/3.x] getHeight and getWidth on Ext.getBody


    Does not report the correct size once you have changed the browser's window size.

    Go into Firebug, type

    Code:
    Ext.getBody().getHeight()
    The drag the Firebug splitter, redo the command, and the height is reported the same.

    This causes problems with

    Code:
    Ext.getBody().mask()
    The fix is

    Code:
            getBody : function(){
                return Ext.apply(Ext.get(document.body || document.documentElement), {
                    getHeight: D.getViewportHeight,
                    getWidth: D.getViewportWidth
                });
            },
    "D" being a locally declared reference to Ext.lib.Dom

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Likewise, Ext.getDoc needs to be

    Code:
            getDoc : function(){
                return Ext.apply(Ext.get(document), {
                    getHeight: D.getDocumentHeight,
                    getWidth: D.getDocumentWidth
                });
            },

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    In fact, Ext.Element neds to take care of this because not all calls which retrieve the document body go through Ext.getBody.

    Particularly, Ext.Component's call to

    Code:
    Ext.get(this.container)
    This can yield the document.body without going through Ext.getBody() which can cause problems with centering floating BoxComponents.

    So really we need

    Code:
    El.get = function(el){
        var ex, elm, id;
        if(!el){ return null; }
        if(typeof el == "string"){ // element id
            if(!(elm = document.getElementById(el))){
                return null;
            }
            if(ex = El.cache[el]){
                ex.dom = elm;
            }else{
                ex = El.cache[el] = new El(elm);
            }
            return ex;
        }else if(el.tagName){ // dom element
            if(!(id = el.id)){
                id = Ext.id(el);
            }
            if(ex = El.cache[id]){
                ex.dom = el;
            }else{
                ex = El.cache[id] = new El(el);
            }
            return ex;
        }else if(el instanceof El){
            if(el != docEl){
                el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
                                                              // catch case where it hasn't been appended
                El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
            }
            return el;
        }else if(el.isComposite){
            return el;
        }else if(Ext.isArray(el)){
            return El.select(el);
        }else if(el == document){
            // create a bogus element object representing the document object
            if(!docEl){
                var f = Ext.extend(El, {
                    getHeight: D.getDocumentHeight,
                    getWidth: D.getDocumentWidth
                });
                docEl = new f();
                docEl.dom = document;
            }
            return docEl;
        }else if(el == document.body){
            // create a bogus element object representing the body object
            if(!bodyEl){ // Don't forget to declare this locally
                var f = Ext.extend(El, {
                    getHeight: D.getViewportHeight,
                    getWidth: D.getViewportWidth
                });
                bodyEl = new f();
                bodyEl.dom = document;
            }
            return bodyEl;
        }
        return null;
    };
    Then Ext.getBody and Ext.getDom could stay as they are.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    It would still fail if you used a flyweight on the document or the body.

    I'm afraid this will have to be fixed in getWidth and getHeight themselves (which will slow down the code).

  5. #5
    Ext User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    gleskinen is on a distinguished road

      0  

    Default


    How would I go about implementing this fix? Can you even override an Ext base method? I am having menu sizing problems due to the fact getBody().getHeight does not return the correct height.

Thread Participants: 2