ExtJS简单的动画效果(ext js淡入淡出特效)

1.html页面:Application HTML file - index.html

<html>
<head>
<title>ExtJs fadeIn() and fadeOut() example</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<style type="text/css">
.x-panel-body{
background-color:#8b8378;
color:#ffffff;
}
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script> </head>
<body>
<div id="myExample">
</div>
</body>
</html>

2.app.js :Application JavaScript file - app.js

Ext.Loader.setConfig({
enabled: true
}); Ext.application({ name: 'myApp',
appFolder: 'app', controllers: [
'MyController'
], launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
items: [
{
xtype: 'myView',
}
]
});
}
});

3.视图View: Application View - MyView.js

Ext.define('myApp.view.MyView' ,{
extend: 'Ext.container.Container',
alias : 'widget.myView', height: 400,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
margin: '5 5 5 5'
}, initComponent: function() {
var me = this; Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Click here to see fadeOut() effect',
action: 'fadeInfadeOut',
pressed: true,
enableToggle: true
},
{
xtype: 'panel',
height: 200,
html: 'Just some TEXT for ExtJs page Animation ...',
id: 'section',
}
]
}); me.callParent(arguments);
}
});

4.控制器:Application Controller - MyController.js

Ext.define('myApp.controller.MyController', {
extend : 'Ext.app.Controller', //define the views
views : ['MyView'], init : function() {
this.control({ 'container' : {
render : this.onPanelRendered
},
'myView button[action=fadeInfadeOut]' : {
toggle : this.onFadeInFadeOutRequest
}
});
}, onPanelRendered : function() {
console.log('The container was rendered');
}, onFadeInFadeOutRequest : function(button, pressed) {
console.log('Button Click',pressed);
if(!pressed){
button.setText('Click here to see fadeIn() effect');
Ext.get("section").fadeOut({
opacity: 0,
easing: 'easeOut',
duration: 2000,
remove: false,
useDisplay: false
});
}
else {
button.setText('Click here to see fadeOut() effect');
Ext.get("section").fadeIn({
opacity: 1,
easing: 'easeOut',
duration: 2000
});
}
} });
上一篇:51Nod 1016 水仙花数 V2(组合数学,枚举打表法)


下一篇:Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)