直接贴代码

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. phpMyAdmin安装

    phpMyAdmin是MySql的一个Web操作界面. phpMyAdmin官网貌似被和谐了,经常无法访问.不过我们可以从GitHub下载phpMyAdmin. 然后解压,搭建与普通的PHP网站一样. ...

  2. EcShop二次开发系列教程–总纲

    EcShop作为老牌的B2C独立网店系统,功能非常全名,强大的文件.数据库缓存机制,保证前后台系统执行速度更快.系统平稳运行.但是过多的功能也或多或少的会影响到系统的整个效率,所有在使用EcShop搭 ...

  3. C++primer 阅读点滴记录（一）

    第十三章 复制控制:(copy control) 复制构造函数(copy constructor) 复制操作符(assignment operator) ps: 什么时候需要显示的定义复制控制操作:类 ...

  4. 使用WIF实现单点登录Part III —— 正式实战

    我们接下来的demo将包括以下的工程: SiteA —— 基于.net framework 4.5的MVC 4程序,使用WIF 4.5的SDK,第一个RP SiteB —— 基于.net framew ...

  5. WPF 超链接方式

      <TextBlock>              <Hyperlink Name="hc" Click="hc_Click"   Navi ...

  6. TreeSet，Comparator

    ThreeSet能够对集合中的对象排序,当TreeSet想集合中加入一个对象时,会把它插入到有序的对象序列中. ThreeSet自带了一个排序方法,这个方法规定了一般数据的排序规则,如果用户想要规定自 ...

  7. hdu 3371 Connect the Cities

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3371 Connect the Cities Description In 2100, since th ...

  8. hdu 1277 全文检索

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1277 全文检索 Description 我们大家经常用google检索信息,但是检索信息的程序是很困难 ...

  9. Swift学习初步（一）

    前几天刚刚将有关oc的教程草草的看了一遍,发现oc其实也不像传说的那么难.今天又开始马不停蹄的学习Swift因为我很好奇,到底苹果出的而且想要代替oc的编程语言应该是个什么样子呢?看了网上的一些中文教 ...

  10. Golang之ring.Ring的Link操作

    ring.Ring 是一个环链. 其Link操作规则是: r.Link(s) => t = r.Next r.Next.Prev = s.Prev s.Prev.Next = r.Next r. ...