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


7 comments :

  1. Hi!

    "myExample is not defined".

    TG

    ReplyDelete
  2. Hi! This is clear but the demo doesn't work.

    ReplyDelete
  3. I checked it works! Please use Chrome or FireFox browser, not tested on IE.

    ReplyDelete
  4. :)

    But really does not work in Firefox.
    I have not tested IE. :)

    ReplyDelete
  5. You are right, What a stupid mistake on my part. The renderTo tag was not in quotes. It worked fine in Chrome and IE, never checked in Firefox. Thanks for pointing it out. Lot of my demos were not working in FF. I fixed them all. Thanks again!

    ReplyDelete
  6. I wanted to thank you for this excellent read!! I definitely loved every little bit of it.Cheers for the info!!!! & This is the perfect blog for anyone who wants to know about this topic. I like play games five nights at freddys 4 | game word cookies answers | hotmail sign in and game hill climb racing 2

    ReplyDelete