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