Ext.ux.component.FadeInPlugin

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 opacity 0% and then animating it back to 100%.

HTML

<link rel="stylesheet" href="http://sencha.whatisextjs.com/ext-4.2.0.663/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<script src="http://sencha.whatisextjs.com/ext-4.2.0.663/ext-all.js"></script>

JavaScript

// Ext.ux.component.FadeInPlugin v0.0.5

console.debug('Debug');
/*
Ext.Msg.show({
    title: 'Debug?',
    msg: 'Enter the matrix...',
    fn: function () {
*/
        /** Adds fadeIn() function to your component; do not use hidden! */
        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()
        });
        
        Ext.create('Ext.button.Button', {
            text: 'Fade In',
            renderTo: Ext.getBody(),
            margin: 10,
            handler: function () {
                 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();
            } // eo handler
        }); // eo button
        
        /*
        Ext.create('Ext.button.Button', {
            text: 'Fade Out',
            renderTo: Ext.getBody(),
            handler: function() {
                var p = Ext.ComponentQuery.query('#thePanel')[0];
               ...