Sencha Touch2 时间轴ListPanel
2015-06-22 14:11
537 查看
![](https://images0.cnblogs.com/blog2015/162508/201506/221407497365317.png)
直接贴代码
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' }] })); } });
相关文章推荐
- thinkphp 定时执行php文件 php自动执行php文件
- 基于PHP的cURL快速入门
- yii关闭session
- YIi debug 方法
- php通过baihui网API实现读取word文档并展示
- PHP读取汉字的点阵数据
- 一步步搭建自己的轻量级MVCphp框架-(二)一个国产轻量级框架Amysql源码分析(1)
- php读取der格式证书乱码解决方法
- php中正则表达式的匹配和数据验证总结
- PHP aes (ecb)解密后乱码问题
- CTP: 接收心跳超时Bug
- PHP调用数据库数据乱码问题
- windows7下安装php的imagick和imagemagick扩展
- DB2 存储过程 - 利用 dbms_output.put_line 输出至屏幕
- PHP 标记风格
- PHP 能做什么?
- PHP 扩展库
- AMH4.2 Ftp账号路径修改设置
- PHP aes (ecb)解密后乱码问题
- php读取der格式证书乱码解决方法