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;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- ssl https服务 需要 php5.3以上
php 5.2 升级 5.3 http://wdlinux.cn/bbs/viewthread.php?tid=37512&highlight=5.3 默认的升级不支持 pdo 升级前编辑升级 ...
- android 38 Abdroid客户端和服务端交互
服务端: package com.sxt.day05; import java.io.IOException; import java.util.ArrayList; import javax.ser ...
- UITableView学习总结
一.UITableView概述 UITableView继承自UIScrollView,可以表现为Plain和Grouped两种风格. UITableView有两个Delegate分别为:dataSou ...
- Java序列化之Serializable
Java的序列化流程如下: Java的反序列化流程如下: 注意:并不是所有类都需要进行序列化,主要原因有两个 1)安全问题.Java中有的类属于敏感类,此类的对象数据不便对外公开,而序列化的对象数据很 ...
- centos 6 搭建ftp服务器支持匿名读写
转载请注明: 凌云物网智科嵌入式实验室: http://iot-yun.com/ 郭文学<guowenxue@gmail.com> vsftpd在运行时一定要关闭SELinux,否 ...
- js 高阶函数 map reduce
map() var arr = [1,3,4]; function a(x){ return x*x; } //map可以将一个函数作为参数执行,将数组中的值,依次使用a函数处理: return ar ...
- eclipse alt + '/' not working.
searching for google,I observed that the 'content assist' shortcut key was take placed with 'ctrl + ...
- xargs rm -rf 与 -exec rm
# find ./ -exec rm {} \; # find ./ | xargs rm -rf 两者都可以把find命令查找到的结果删除,其区别简单的说是前者是把find发现的结果一次性传给exe ...
- UOJ222 NOI2016 区间 线段树+FIFO队列
首先将区间按长度排序后离散化端点(这里的“长度”指的是离散化之前区间的实际长度) 然后模拟一个队列,区间按排好的顺序依次进入,直到某个点被覆盖了M次.之后依次出队,直到所有点都被覆盖小于M次 修改和询 ...
- spl_autoload_register()和__autoload()
关于spl_autoload_register()和__autoload() 看两者的用法: //__autoload用法 function __autoload($classname) { ...