[2.2] In a 'render' handler, both this.isVisible() and this.hidden are true

[pbuyle]

When handling the render event of a Component rendered hidden, both this.isVisible() and this.hidden are true. According to the documentation the 'hidden' property is True if this component is hidden and isVisible() returns true if this component is visible.

In Firebug, you can see this by running the following code which will print "true true"

new Ext.Panel({renderTo: Ext.getBody().createChild(), hidden: true, listeners:{'render':function(){console.log(this.isVisible(), this.hidden)}}})

[Condor]

Normally isVisible() == !hidden, but this is not true in the render handler.

Because of limitations in IE you can't correctly render most components hidden. That is why components are rendered visible and hidden afterwards.

The render event is part of the rendering process, so the component is not yet hidden, but the hidden flag is already set to true (so the component knowns it should hide itself after render).

[pbuyle]

I figured that.

But why is the 'render' event fired before hidding the component in Component.render ?
why

    render : function(container, position){
        if(!this.rendered && this.fireEvent("beforerender", this) !== false){
            // Component rendering...
            this.fireEvent("render", this);
            this.afterRender(this.container);
            if(this.hidden){
                this.hide();
            }
            if(this.disabled){
                this.disable();
            }

            if(this.stateful !== false){
                this.initStateEvents();
            }
    }
    return this;
}

and not

    render : function(container, position){
        if(!this.rendered && this.fireEvent("beforerender", this) !== false){
            // Component rendering...
            if(this.hidden){
                this.hide();
            }
            if(this.disabled){
                this.disable();
            }
            this.fireEvent("render", this);
            this.afterRender(this.container);
            if(this.stateful !== false){
                this.initStateEvents();
            }
    }
    return this;
}

Does components rely on the 'render' event to render themself.

Currently (2.2), in the documentation, the 'render' event is said to be fired after the component is rendered. If it is fired as part of the rendering process, it should be in the documentation. And oddities such as isVisible() == hidden should be mentioned.

[Animal]

Seems like a good idea. Get the Component into the correctly configured state before signalling that it is rendered.

[Condor]

I don't agree:
The render event can be used to modify/extend the component DOM, which could lead to sizing problems when the component would be hidden with display:none.

ps. There is an open feature request for an 'afterrender' event, which would be called after the component is hidden.

[pbuyle]

An 'afterrender' event with correct documentation for the 'render' one should fix the problem.