extjs简单动画2

var store = Ext.create('Ext.data.Store', {
                storeId:'employeeStore',
                fields:['name', 'seniority', 'department'],
                groupField: 'department',
                data: {'employees':[
                    { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
                    { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
                    { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
                    { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
                    { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" }
                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'employees'
                    }
                }
            });
            var myComponent = Ext.create('Ext.grid.Panel', {
                renderTo: Ext.getBody(),
                 800,
                height: 500,
                layout: 'fit',
                closable: true,
                //hidden: false,
                store: Ext.data.StoreManager.lookup('employeeStore'),
                columns: [
                    { header: 'Name',  dataIndex: 'name',flex:1},
                    { header: 'Email', dataIndex: 'email'},
                    { header: 'Phone', dataIndex: 'phone'}
                ],
                title: '测试中',
                //style: 'border: 1px solid red;',
                listeners: {
                    beforeclose:function(){
                        myComponent.getEl().slideOut("r", {duration: 500});
                        // 在这里延迟5秒关闭
                        return false;
                    }
                }
            });


            Ext.create('Ext.fx.Anim', {
                target: myComponent,
                duration: 1000,
                from: {
                     1000,
                    height: 800 // 开始宽度 400
                },
                to: {
                    left:200
                    // width
                    // height
                },
                iterations: 1,   //动画次数
                easing: 'backOut', // 中间值 
                alternate: true   // 动画反转
            });
            
           Ext.create('Ext.fx.Animator', {
                target: myComponent,
                duration: 1000, // 10 seconds
                keyframes: {
                    0: {
                        opacity: 1,
                        left: 100
                    },
                    20: {
                        x: 30,
                        left: 150
                    },
                    40: {
                        x: 130,
                        left: 75
                    },
                    60: {
                        y: 80,
                        left: 100
                    },
                    80: {
                        y: 200
                    },
                    100: {
                        opacity: 1,
                        backgroundColor: '00FF00'
                    }
                }
            });