afterLayout vs layout, afterRender vs render, etc. in ExtJS?

Question

What is the difference between events like afterLayout and layout, afterRender and render? I understand the difference between beforeLayout and afterLayout -- but how does layout event differ?

Answer 1

Note: Applies to Ext 3.x only. This was answered in 2010.

There is no 'layout' event, only afterLayout. From the docs, afterLayout "Fires when the components in this container are arranged by the associated layout manager" which is pretty self-explanatory. afterLayout is only fired by Container subclasses that are responsible for laying out child components.

One the other hand, all Component subclasses (including Containers) fire the render and afterRender events. The basic difference is simply that afterRender fires later. render fires after the DOM markup is finished rendering, but before other things that might happen (like hiding, disabling, state-restoration, etc.) during the rendering process. afterRender fires as the very last event after all of that is complete. To fully understand this you should look at the source for the Ext.Component.render() method, which shows step-by-step how the rendering process works and when these events are fired.