Extjs Animate Sample

by wales

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>

JavaScript

Ext.onReady(function () {

    var panel = new Ext.Panel({
        title: 'Parent',
        height: 200,
        autoScroll: true,
        width: 700,
        id: 'Parent',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'panel',
            title: 'Child',
            height: 1000,
            width: 1000
        }]
    })


    panel.getEl().animate({
        opacity: {
            to: .25
        }
    },
    0.5,
    null,
        'easeOut',
        'run')
        .animate({
        color: {
            to: '#FF0000'
        }
    },
    0.5,
    null,
        'easeOut',
        'color');
})