What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

26Mar/130

ExtJS 4.2 Plugin Example

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.

Screen

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?

VN:F [1.9.22_1171]
Rating: 7.4/10 (18 votes cast)