Blog Archive

ExtJs fadeIn() fadeOut() animation example

  • fadeIn() method 
    • animates an element from transparent to opaque. The ending opacity can be specified using the config option. 
  • fadeOut() method 
    • animates an element from opaque to transparent. The ending opacity can be specified using the config option.
In this example we are going to see how to fadeIn and fadeOut a Panel element.


extjs fadein fadeout example extjs fadein fadeout example

Application HTML file - index.html

<html>
<head>
<title>ExtJs fadeIn() and fadeOut() example</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <style type="text/css">
 .x-panel-body{
  background-color:#8b8378;
  color:#ffffff;
 }
 </style>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
<div id="myExample">
</div> 
</body>
</html>

Application JavaScript file - app.js

Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
    appFolder: 'app',
    
    controllers: [
                  'MyController'
              ],

    launch: function() {
     Ext.create('Ext.container.Container', {
         renderTo: 'myExample',
            items: [
                {
                 xtype: 'myView',
                }
            ]
        });
    }
});

Application View - MyView.js

Ext.define('myApp.view.MyView' ,{
 extend: 'Ext.container.Container',
 alias : 'widget.myView',
 
    height: 400,
    width: 400,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    defaults: {
     margin: '5 5 5 5'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'button',
                    text: 'Click here to see fadeOut() effect',
                    action: 'fadeInfadeOut',
                    pressed: true,
                    enableToggle: true
                },
                {
                    xtype: 'panel',
                    height: 200,
                    html: 'Just some TEXT for ExtJs page Animation ...',
                    id: 'section',
                }
            ]
        });

        me.callParent(arguments);
    }
});

Application Controller - MyController.js

Ext.define('myApp.controller.MyController', {
   extend : 'Ext.app.Controller',

   //define the views
   views : ['MyView'],
   
   init : function() {
    this.control({
     
     'container' : {
      render : this.onPanelRendered
     },
     'myView button[action=fadeInfadeOut]' : {
      toggle : this.onFadeInFadeOutRequest 
     }
    });
   },

   onPanelRendered : function() {
    console.log('The container was rendered');
   },
   
   onFadeInFadeOutRequest : function(button, pressed) {
    console.log('Button Click',pressed);
    if(!pressed){
     button.setText('Click here to see fadeIn() effect');
     Ext.get("section").fadeOut({
         opacity: 0,
         easing: 'easeOut',
         duration: 2000,
         remove: false,
         useDisplay: false
     });
    }
    else {
     button.setText('Click here to see fadeOut() effect');
     Ext.get("section").fadeIn({
         opacity: 1,
         easing: 'easeOut',
         duration: 2000
     });
    }
   }           
   
         
 });

References