Blog Archive

ExtJs slideIn() slideOut() animation example

  • slideIn() method 
    • Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect.
  • slideOut() method 
    • Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
In this example we are going to see how to slideIn and slideOut a Panel element.


ExtJs slideIn slideOut example ExtJs slideIn slideOut example

Application HTML file - index.html

<html>
<head>
<title>ExtJs slideIn() and slideOut() 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 slideOut() effect',
                    action: 'slideInslideOut',
                    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=slideInslideOut]' : {
      toggle : this.onSlideInSlideOutRequest 
     }
    });
   },

   onPanelRendered : function() {
    //console.log('The container was rendered');
   },
   
   onSlideInSlideOutRequest : function(button, pressed) {
    //console.log('Button Click',pressed);
    if(!pressed){
     button.setText('Click here to see slideIn() effect');
     Ext.get("section").slideOut('t', {
         easing: 'easeOut',
         duration: 2000,
         remove: false,
         useDisplay: false
     });
    }
    else {
     button.setText('Click here to see slideOut() effect');
     Ext.get("section").slideIn('t', {
         easing: 'easeOut',
         duration: 2000
     });
    }
   }           
   
         
 });

References


2 comments :