您的位置：首页 > Web前端 > JavaScript

ExtJS简单的动画效果（ext js淡入淡出特效）

2013-07-23 17:58 471 查看

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

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航