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
});
}
}
});
ExtJS简单的动画效果（ext js淡入淡出特效）的更多相关文章
- ExtJS简单的动画效果2（ext js淡入淡出特效）
Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...
- 32.ExtJS简单的动画效果
转自:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html 说明:这篇文章的大部分内容来源于网上,经过自己实现其效果后,整理如下: 在进行 Java ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 用Direct2D和DWM来做简单的动画效果2
原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...
- 用Direct2D和DWM来做简单的动画效果
原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...
- js 淡入淡出的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js淡入淡出
示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- Android摄像头抓取图像的格式
android.hardware.Camera.PreviewCallback /** * Callback interface used to deliver copies of preview f ...
- Lua学习----面向对象编程
1．类 再Lua中可以使用表和函数实现面向对象,将函数和相关的数据放置放置于同一个表中就形成了对象.例如: Measure = {width = 0, height = 0} function Mea ...
- SQL Server Management Studio 使用作业实现数据库备份
1.数数据库备份脚本: 数据库备份:DECLARE @BcpFile VARCHAR(30),@SQLBACKUP VARCHAR(1000),@BcpFullFile VARCHAR(100) SE ...
- Uri、UriMatcher、ContentUris详解
http://blog.csdn.net/feng88724/article/details/6331396 1.Uri 通用资源标志符(Universal Resource Identifier, ...
- padding and margin.
padding is the space between the content and the border, whereas margin is the space outside the bor ...
- copssh加bitvise
只是简单记录下自己在成功使用的方案: 目的:为了突破公司对网站和qq的限制 具备的条件:一台云服务器.Copssh_4.1.0.bitvise ssh client 4.62.公司电脑客户端 一.首先 ...
- VS2010调试时候未响应
这几天使用vs2010,调试时候经常未响应,等了半天才缓过来,严重影响心情,决定解决这个问题. 搜寻一番,试着关闭VS,重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.ex ...
- ST3破解命令
open terminal and input it! printf '\x39' | dd seek=$((0x6f35)) conv=notrunc bs=1 of=/Applicatio ...
- GUID是什么意思及Guid在sqlserver中的使用
GUID(全球唯一标识)是微软使用的一个术语,由一个特定的算法,给某一个实体,如Word文档,创建一个唯一的标识,GUID值就是这个唯一的标识码.GUID广泛应用于微软的产品中,用于识别接口.复制品. ...
- Prototype 模式
Prototype 模式提供了一个通过已存在对象进行新对象创建的接口(Clone) ,Clone()实现和具体的实现语言相关,在 C++中我们将通过拷贝构造函数实现之. /////////////// ...