sencha touch Carousel 自动切换
代码是在网上找的,忘记原出处了
/**
* 跑马灯自动切换
*/
Ext.define('ux.RotatingCarousel', {
extend: 'Ext.carousel.Carousel',
alternateClassName: 'rotatingCarousel',
xtype: 'rotatingCarousel',
config: {
delay: 3000,
start: true,
listeners: {
tap: {
fn: function () {
this.pause();
},
element: 'element'
},
swipe: {
fn: function () {
this.start();
},
element: 'innerElement'
}
}
},
initialize: function () {
if (this.config.start) {
this.start();
}
},
rotate: function () {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (this.getActiveIndex() === this.getMaxItemIndex()) {
this.setActiveItem(0, 'slide');
} else {
this.next();
}
this.timeout = Ext.defer(this.rotate, this.config.delay, this);
},
start: function (delayStart) {
this.timeout = Ext.defer(this.rotate, delayStart || this.config.delay, this);
},
pause: function (delayStart) {
if (this.timeout) {
clearTimeout(this.timeout);
}
if (delayStart) {
this.start(delayStart);
}
return this;
},
stop: function (delayStart) {
this.pause(delayStart);
this.setActiveItem(0, 'slide');
return this;
}
});
使用:
Ext.define('app.view.Home', {
extend: 'Ext.Container',
xtype: 'home',
requires: ['ux.RotatingCarousel'],
config: {
items: [{
xtype: 'rotatingCarousel',
height: '200px',
items: [{
html: '<div class="homeImg" style="background-image:url(\'resources/images/lg1.png\')"></div>'
},
{
html: '<div class="homeImg" style="background-image:url(\'resources/images/lg2.png\')"></div>'
},
{
html: '<div class="homeImg" style="background-image:url(\'resources/images/lg3.png\')"></div>'
}]
}]
}
});
sencha touch Carousel 自动切换的更多相关文章
- sencha touch carousel 扩展 CardList 可绑定data/store
扩展代码: /* *扩展carousel *通过data,tpl,store配置数据 */ Ext.define('ux.CardList', { extend: 'Ext.carousel.Caro ...
- sencha touch 可自动增长高度TextArea
js代码如下: /* *高度自动增长的文本框 */ Ext.define('ux.TextArea', { extend: 'Ext.field.TextArea', xtype: 'autoText ...
- sencha touch JsonP 自动提示消息 masked
//公用类 Ext.define('app.util', { alternateClassName: 'util', statics: { /*为Ext.Viewport添加一个消息提示组件(需要初始 ...
- 【翻译】使用Sencha Touch开发Google Glass应用程序
原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...
- sencha touch 问题汇总
做sencha touch有一段时间了,目前而言,sencha touch在android上问题比较严重,在此对android中sencha touch的问题做一些汇总: 1.内存问题: 打包成安装程 ...
- 关于用phonegap 3.0+ 打包后sencha touch按钮点击切换动画延迟接近一秒的以及界面闪烁的解决方案
android的webview对硬件加速的支持貌似很不理想,在开启硬件加速的情况下,css3这些需要调用硬件加速的样式会大幅拖慢html5的webapp,在htc的部分手机上还会因开启硬件加速而导致闪 ...
- Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)
常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...
- sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题
答案来至于 Sencha Touch 交流 @周旭 这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案:1.横竖屏转换的时候不要重新跑onCreate方法,这个可以在 ...
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
随机推荐
- 谈谈如何优化MYSQL数据库查询
1.优化数据类型 MySQL中数据类型有多种,如果你是一名DBA,正在按照优化的原则对数据类型进行严格的检查,但开发人员可能会选择他们认为最简单的方案,以加快编码速度,或者选择最明显的选择,因此,你可 ...
- dubbo学习过程、使用经验分享及实现原理简单介绍
一.前言 部门去年年中开始各种改造,第一步是模块服务化,这边初选dubbo试用在一些非重要模块上,慢慢引入到一些稍微重要的功能上,半年时间,学习过程及线上使用遇到的些问题在此总结下. 整理这篇文章差不 ...
- C# 异步锁【转】
原文:http://www.yalongyang.com/2013/01/c-sharp-await-lock/ 在C#中,普通用锁很简单 object m_lock = new object(); ...
- Java学习路线图(如何快速学Java)
不知不觉从初学Java到现在已经8年了,今天在这里给刚入门和入门不久的小伙伴们一些建议.可能总结的不是很详细,但给出了一个大概的学习路线.希望对大家有帮助哈~ 如何快速学Java 这里我以Java E ...
- windows 下查看端口占用情况
windows下面查看端口占用情况: netstat -ano|findstr "8888" TCP 127.0.0.1:8888 0.0.0.0:0 LISTENING 6876 ...
- 织梦Dedecms系统可疑文件include/filter.inc.php扫描出漏洞,该如何解决?
今天在做网站监察的时候,发现网站出了一个问题,在对网站做木马监测的时候,扫描出一个可疑文件:/include/filter.inc.php,建议删除,但仔细检查后,发现此文件是织梦(Dedecms)系 ...
- mysql中如何开启binlog?开启二进制日志文件?binary log?
需求描述: 开启mysql的binlog即binary log日志功能,在此记录下. 版本描述: mysql版本:5.7.21-log 操作过程: 1.修改my.cnf并且将以下参数加入其中,重启my ...
- mysql中显示当前数据库下的所有表,包括视图。
环境说明: mysql版本:5.5.57-log 操作系统:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求:查看当前数据库下所有的表 ...
- 【scala】scala 数组 (三)
基础内容 1. 数组定义 定长.可变数组的定义;元素添加,删除,排序,求和等常用运算 import scala.collection.mutable.ArrayBuffer import scala. ...
- 上机题目(0基础)- 用数组实现记事本(Java)
用java实现一个记事本程序,记录记下的按键,代码例如以下: package com.java.test; import java.awt.Graphics; import java.awt.even ...