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


3 comments :

  1. This works in Internet Explorer 7 by the way. Just thought you should know. Great job you done at creating this feature.

    ReplyDelete
  2. I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and will look for more postings from you. I like play game five nights at freddy’s 4, game word cookies game , game hill climb racing 2 , hotmail login, and u? I hope people visit my website.

    ReplyDelete