What Is ExtJS ExtJS 4+ Extensions Examples Tutorials


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?


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

View Demo on JSFiddle

VN:F [1.9.22_1171]
Rating: 7.4/10 (18 votes cast)
ExtJS 4.2 Plugin Example, 7.4 out of 10 based on 18 ratings
Comments (0) Trackbacks (1)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *