代码是在网上找的,忘记原出处了

/**
* 跑马灯自动切换
*/
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 自动切换的更多相关文章

  1. sencha touch carousel 扩展 CardList 可绑定data/store

    扩展代码: /* *扩展carousel *通过data,tpl,store配置数据 */ Ext.define('ux.CardList', { extend: 'Ext.carousel.Caro ...

  2. sencha touch 可自动增长高度TextArea

    js代码如下: /* *高度自动增长的文本框 */ Ext.define('ux.TextArea', { extend: 'Ext.field.TextArea', xtype: 'autoText ...

  3. sencha touch JsonP 自动提示消息 masked

    //公用类 Ext.define('app.util', { alternateClassName: 'util', statics: { /*为Ext.Viewport添加一个消息提示组件(需要初始 ...

  4. 【翻译】使用Sencha Touch开发Google Glass应用程序

    原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...

  5. sencha touch 问题汇总

    做sencha touch有一段时间了,目前而言,sencha touch在android上问题比较严重,在此对android中sencha touch的问题做一些汇总: 1.内存问题: 打包成安装程 ...

  6. 关于用phonegap 3.0+ 打包后sencha touch按钮点击切换动画延迟接近一秒的以及界面闪烁的解决方案

    android的webview对硬件加速的支持貌似很不理想,在开启硬件加速的情况下,css3这些需要调用硬件加速的样式会大幅拖慢html5的webapp,在htc的部分手机上还会因开启硬件加速而导致闪 ...

  7. Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)

    常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...

  8. sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题

    答案来至于 Sencha Touch 交流 @周旭 这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案:1.横竖屏转换的时候不要重新跑onCreate方法,这个可以在 ...

  9. 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

随机推荐

  1. C# winform右击导入手机号码

    private void 导入手机号ToolStripMenuItem_Click(object sender, EventArgs e) { using (OpenFileDialog Openfi ...

  2. 混合线路接入时,360、QQ管家等测速显示电信IP或任意线路的IP

    最近很多人QQ上问我,我有电信.联通接入,用户测速的时候有的时候显示联通的IP,可是我想让他显示为电信的IP,怎么办? 3年前开始使用联通的线路时,就这样设置了,有些人还拿这个设置当宝贝了???? 其 ...

  3. CentOS 7 64位更换内核安装锐速破解版

    1.更新内核 rpm -ivh http://soft.91yun.org/ISO/Linux/CentOS/kernel/kernel-3.10.0-229.1.2.el7.x86_64.rpm - ...

  4. Netbeans配置Java SE嵌入式平台(树莓派)

    1.配置平台 来源:http://www.cnblogs.com/xiaobo-Linux/p/7955769.html 2. 选择远程 3. 填写信息 JRE 路径是树莓派上的路径:how? sud ...

  5. YAML简介

    YAML Ain’t Markup Language YAML 是一种简洁的非标记语言 YAML以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁易读 基本规则: 1.大小写敏感  2. ...

  6. 未定义变量 "caffe" 或类 "caffe.reset_all"

    配置caffe后在matlab中测试报错. 未定义变量 "caffe" 或类 "caffe.reset_all". 我的原因是:caffe在matlab接口处没 ...

  7. QT编译错误:invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEvent'

    执行3D常将中实体的pick操作,结果出现了编译错误:invalid application of 'sizeof' to incomplete type 'Qt3DRender::QPickEven ...

  8. 企业"信息化建设"价值

    企业信息化现状分析 随 着企业信息化建设的快速发展,信息技术与信息系统对企业组织形态.治理结构.管理体制.运作流程和商业模式的影响日益深化,企业组织对信息技术和信息 系统的依赖性在日益加强,IT正成为 ...

  9. gtk界面设计

    一.GTK基本 #include <gtk/gtk.h> int main( int argc, char *argv[]) { GtkWidget *window; /*初始化整个GTK ...

  10. 8 -- 深入使用Spring -- 4...5 AOP代理:基于注解的“零配置”方式

    8.4.5 基于注解的“零配置”方式 AspectJ允许使用注解定义切面.切入点和增强处理,而Spring框架则可识别并根据这些注解来生成AOP代理.Spring只是使用了和AspectJ 5 一样的 ...