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.

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?

Plugin

Ext.define('Ext.ux.component.FadeInPlugin', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.ux.fadeinplugin',
    requires: ['Ext.fx.Anim'],
 
    init: function (component) {
        Ext.apply(component, {
            style: {
                opacity: 0
            }
        });
        component.fadeIn = this.fadeIn.bind(component);
    },
 
    fadeIn: function () {
        var me = this;
        Ext.create('Ext.fx.Anim', {
            target: me,
            duration: 400,
            from: {
                opacity: 0
            },
            to: {
                opacity: 1
            }
        });
    } // eo fadeIn()
});

Sample Usage

var p = Ext.create('Ext.panel.Panel', {
    id: 'thePanel',
    title: 'Test',
    html: 'Test',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    margin: 50,
    plugins: ['ux.fadeinplugin']
}); // eo panel
p.fadeIn();

View Demo on JSFiddle