I’ve enjoyed the 4.2 ExtJS release since it came out; especially the new theme and grids. I recently wanted to “puff in” a Panel for some eyecandy, but I quickly realized it’s a bit trickier than you might think.
Components don’t have slideOut or fadeIn methods like Elements do.
It’s not a problem in case of “hiding” actions (i.e. slideOut or puff), which you can accomplish by something like component.getEl().slideOut().
However, in the case where you want to “show” a hidden panel (i.e. slideIn), in a case of deferred rendering (i.e. when creating and showing a new panel on the fly), the getEl() doesn’t have a DOM element to show yet, until the panel has been rendered.
The fadeIn method is achieved by showing a panel with CSS opacity 0% and then animating it back to 100%.
I ended up solving this via means of a plugin. Can you think of a more elegant solution?
Continue reading ExtJS 4.2 Plugin Example