extjs 단순 애니메이션2
6655 단어 ExtJs
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'
}
}
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
