xanim

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/ext-theme-classic/ext-theme-classic-all-debug.css">

JavaScript

var myComponent = Ext.create('Ext.panel.Panel',{
    renderTo: Ext.getBody(),
    width: 500,
    height: 700,
    itemId: 'myPanel',   
    style: {
        position: 'relative',
        overflow: 'hidden'
    },
    items: [
        { xtype: 'panel', 
         title: 'Panel 1',
         bodyCls: 'x-panel-body-default',
         width: 500,
         height: 400,
         style: {
             position: 'absolute',
             top: '0px',
             left: '0px',
             'background-color': '#cccccc'
         },
         id: 'panel1',
         items: [
             {
                 width: 250,
                 xtype: 'textfield',
                 fieldLabel: 'First Name'
            }, 
            {
                width: 250,
                xtype: 'textfield',
                fieldLabel: 'Last Name'
            }]
        },
        { xtype: 'panel', 
         title: 'Panel 2',
         width: 500,
         height: 400,
         id: 'panel2',
         style: {
             position: 'absolute',
             top: '0px',
             left: '500px',
             'background-color': 'rgba(144,144,144, 0.5)'
         },
         items: [
             {
                 width: 250,
                 xtype: 'textfield',
                 fieldLabel: 'Second Name'
            }, 
            {
                width: 250,
                xtype: 'textfield',
                fieldLabel: 'Second Last Name'
            }]
        }
    ]
});
setTimeout(function() {
    Ext.create('Ext.fx.Anim', {
        target: Ext.getCmp('panel1'),
        duration: 1000,
        keyframes : {
            '0%': {
                x: 0
            },
            '60%': {
                x: -480
            },
            '100%': {
                x: -500
            }
        },
        listeners: {
            keyframe: function(o, n) {
                //console.log('transition:', n);
            }
        }
    });
    
    Ext.create('Ext.fx.Anim', {
        target:...