1. #1
    Ext User pbuyle's Avatar
    Join Date
    Mar 2008
    Location
    Belgium
    Posts
    32
    Vote Rating
    0
    pbuyle is on a distinguished road

      0  

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

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


    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"
    Code:
    new Ext.Panel({renderTo: Ext.getBody().createChild(), hidden: true, listeners:{'render':function(){console.log(this.isVisible(), this.hidden)}}})

  2. #2
    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


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

  3. #3
    Ext User pbuyle's Avatar
    Join Date
    Mar 2008
    Location
    Belgium
    Posts
    32
    Vote Rating
    0
    pbuyle is on a distinguished road

      0  

    Question


    I figured that.

    But why is the 'render' event fired before hidding the component in Component.render ?
    why
    Code:
        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
    Code:
        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.

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

      0  

    Default


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

  5. #5
    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


    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.

  6. #6
    Ext User pbuyle's Avatar
    Join Date
    Mar 2008
    Location
    Belgium
    Posts
    32
    Vote Rating
    0
    pbuyle is on a distinguished road

      0  

    Default


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

Thread Participants: 2