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
});
}
}
});
