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

[Animal]

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

Go into Firebug, type

Ext.getBody().getHeight()

The drag the Firebug splitter, redo the command, and the height is reported the same.

This causes problems with

Ext.getBody().mask()

The fix is

        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

[Animal]

Likewise, Ext.getDoc needs to be

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

[Animal]

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

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

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.

[Condor]

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

[gleskinen]

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.