直接贴代码

timeline.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="../pub/touch-2.3.1/resources/css/sencha-touch.css">

        <script type="text/javascript" src="../pub/touch-2.3.1/sencha-touch-all-debug.js"></script>

        <script type="text/javascript" src="app.js"></script>

	<style>

    .timeline{

        padding-left:50px;

    }

    .timeline .x-list-item{

            box-shadow: 0px 1px 0px rgba(255,255,255,.1) ;

            border-radius: 6px;

            margin-left:5px;

        }

    .timeline .x-list-item::before {

         content: "";

         width: 2px;

         height: 100%;

         top: 0;

         bottom: 0;

         left: 0;

         background: #000;

         position: absolute; 

     }/* 时间轴竖线*/

    .timeline .x-list-item::after {

        content: "";

        width: 10px;

        height: 10px;

        border-radius: 50%;

        position: absolute;

        left:-4px;

        top: 36px;

        background: #000;

        border: 2px solid #333;

        z-index: 10;

        border-color: #ccc;

        }/* 时间轴圆点 */

    .timeline .x-list-item:hover::after {  border-color: #333 ;} /*鼠标放在Item时间轴圆点变大*/

		</style>

		<title>列表</title>

    </head>

    <body></body>

</html>

app.js

Ext.Loader.setConfig({

    disableCaching: false

});

/*

* 时间轴特效

* @落雨 http://ae6623.cn

*/

Ext.application({

    name: 'list',

    requires: ['Ext.List'],

    launch: function () {

        Ext.Viewport.add(Ext.create('Ext.List', {

            fullscreen: true,

            cls: 'timeline',

            disableSelection: true,

            itemTpl: '<div>流程:{activity_name}-{activity_id}</div><div>当前节点:{date}</div>',

            itemHeight: 60,

            data: [{

                activity_name: '审批1',

                activity_id: 123,

                date: '2015-06-01'

            },

            {

                activity_name: '审批2',

                activity_id: 123,

                date: '2015-06-01'

            },

            {

                activity_name: '审批3',

                activity_id: 123,

                date: '2015-06-01'

            },

            {

                activity_name: '审批4',

                activity_id: 123,

                date: '2015-06-01'

            },

            {

                activity_name: '审批5',

                activity_id: 123,

                date: '2015-06-01'

            },

            {

                activity_name: '审批6',

                activity_id: 123,

                date: '2015-06-01'

            }]

        }));

    }

});

Sencha Touch2 时间轴ListPanel的更多相关文章

  1. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  2. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  3. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  4. SmohanTimeLine.js 酷炫的时间轴效果

    展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...

  5. jquery时间轴幻灯展示源代码

    查看效果:http://hovertree.com/texiao/jquery/75/ 源代码下载:http://hovertree.com/h/bjaf/8jlpc2wu.htm 效果图如下: 代码 ...

  6. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  7. JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  8. 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  9. 垂直时间轴HTML

    1.概述 用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先来看看下面的 ...

随机推荐

  1. VCL主要框架

    TObject ->TPersistent  Classes,抽象类 ->TComponent  Classes,抽象类 ->TControl  Controls ->TGra ...

  2. DevExpress XtraGrid 数据导出导入Excel

    // <summary> /// 导出按钮 /// </summary> /// <param name="sender"></param ...

  3. the usage of key word "static" in java language

    ---恢复内容开始--- 作用 有时你希望定义一个类成员,使它的使用完全独立于该类的任何对象.通常情况下,类成员必须通过它的类的对象访问,但是可以创建这样一个成员,它能够被它自己使用,而不必引用特定的 ...

  4. python的egg包的安装和制作]

    Defining Python Source Code Encodings Python egg 的安装 egg文件制作与安装 2011-06-10 14:22:50|  分类: python |   ...

  5. [转]PROC简单使用用例－－VC连接ORACLE

    [转]PROC简单使用用例--VC连接ORACLE 操作系统:windows 7 数据库版本:oracle 10g VS版本:VS2010 前言:连接ORACLE的方式有很多,此处仅以PROC为例,说 ...

  6. 【转】Java JDBC连接SQL Server2005错误：通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败

    错误原因如下: Exception in thread "main" org.hibernate.exception.JDBCConnectionException: Cannot ...

  7. Python 以正确的宽度在盒子中居中打印一个字符

    注意://为整除的意思 代码: # -*- coding:UTF-8 -*- sentence = input("Sentence:") screen_width = 80 tex ...

  8. JAVA基础-子类继承父类实例化对象过程

    之前在项目中碰到这样一个问题: 类B继承了类A,B在实例化的时候,A的构造方法中调用了B的某个方法,并且B的方法中对B的成员属性进行了初始化,然后最后得到的B对象的成员属性为空. 代码场景如下: 这里 ...

  9. [原创] PostgreSQL Plus Advanced Server在Windows中配置双机热备流复制

    一.系统环境 操作系统:Windows Server 2003/2008 两个节点分别为master与slave. 主节点master:172.27.19.28 备机点slave:172.27.19. ...

  10. hdu 1195 Open the Lock

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1195 Open the Lock Description Now an emergent task f ...