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(),
width: 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: {
width: 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'
}
}
});
